javascript使用canvas绘制矩形的方法
- 2019-06-09 22:02:32
- 开发
- 992
- shevechco
canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
绘制之前我们需要先创建一个canvas元素到网页
<canvas id="draw" style="width: 640px; height:480px; border: 1px solid #EEE;"></canvas>
然后我们绘制一个无填充的矩形框,我的javascript代码如下
var cs = document.getElementById("draw"); var ct = cs.getContext("2d"); ct.strokeStyle = "red"; ct.lineWidth = 1; ct.strokeRect(30,20,45,35);
strokeRect是用来绘制无填充的矩形(X轴起点,Y轴起点,X轴终点,Y轴终点),lineWidth是边框宽度,strokeStye是边框颜色
接下来我们绘制一个填充色彩的矩形框
var cs = document.getElementById("draw"); var ct = cs.getContext("2d"); ct.fillStyle = "gray" ct.fillRect(30,20,45,35);
跟上面差不多,主要是strokeStye更换为fillRect,然后可以使用fillStyle填充颜色,如果不填充颜色默认就是黑色的
注意使用strokeStye是没有lineWidth的,如果需要边框需要使用strokeStye将fillRect框一遍再加边框
-
标签
- javascript
- canvas
内容版权声明:除非注明,否则皆为本站原创文章。
转载注明出处:http://www.sulao.cn/post/684