绘制矩形的简单方法

最新推荐文章于 2024-07-11 01:27:27 发布

weixin_34191734

最新推荐文章于 2024-07-11 01:27:27 发布

阅读量206

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Litter-Tulip/p/5264442.html

版权

<canvas id="canvas" style="width:500px;height:500px;background:#999">ddafc</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
context.lineWidth=1;
context.strokeStyle="red";
context.moveTo(50,50);
context.lineTo(100,50);
context.lineTo(100,100);
context.lineTo(50,100);
context.closePath();
//context.lineTo(50,50);
context.stroke();

context.beginPath();
context.lineWidth=5;
context.strokeStyle="pink";
context.rect(80,80,60,60);//第一种方法
context.stroke();
</script>

beginPath：在上一个图的基础上重新绘制另一个图；

rect(x,y,w,h)：绘制矩形的起点坐标及长宽

<canvas id="canvas" style="width:500px;height:500px;background:#999">ddafc</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
context.beginPath();
context.lineWidth=5;
context.strokeStyle="pink";
context.rect(10,10,60,60);
context.stroke();

context.beginPath();
context.lineWidth=5;
context.strokeStyle="red";
context.strokeRect(10,80,60,60);//第二种方法

strokeRect(x,y,w,h)：相当于rect和stroke的结合体；

以下两种是有填充的

//第三种方法

context.beginPath();
context.lineWidth=5;
context.fillStyle="pink";//填充色
context.rect(80,10,60,60);
context.fill();//与stroke方法作用相同

//第四种方法
context.beginPath();
context.lineWidth=5;
context.fillStyle="red";
context.fillRect(80,80,60,60);

转载于:https://www.cnblogs.com/Litter-Tulip/p/5264442.html