HTML5的canvas绘制矩形
直接上代码演式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
background: dodgerblue;
}
</style>
</head>
<body>
<!--canvas相当于一块画板-->
<canvas id="nntt" width="800" height="500"></canvas>
<script type="text/javascript">
// 获得画板 通过ID捉到它
var nntt = document.getElementById("nntt");
// 获得绘画环境
// '2d'平面的绘画环境画布
var cv = nntt.getContext('2d');
// 指定颜色放前面
// cv.fillStyle = '#DB7093';
// 绘制一个填充矩形
// 这里有的是cv 图片里的是context.fillRect 前面这个可以自已命名的
//绘制开始从左边200,上面100开始.宽度260,高度199 但绘制出来是没有指定颜色默认的黑色。
// cv.fillRect(200,100,260,199);
//绘制指定颜色 context.fillStyle= 'red'
//指定填充颜色 绘制颜色要放在前面，否则不显示颜色的
//cv.fillStyle = '#DB7093';
//指定线条粗细
cv.lineWidth=10;
// 绘制指定线条颜色
cv.strokeStyle = '#DB7093';
// 绘制矩形空心的(无填充)
cv.strokeRect(200,100,260,199);
</script>
</body>
</html>
上面代码效果图片：
原文链接：https://www.qiquanji.com/post/7656.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知