Canvas 基本功能-画矩形
画矩形
用canvas画矩形下面来来看看,如下为画矩形代码。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=5;
ctx.strokeStyle="red";
ctx.beginPath();
ctx.strokeRect(10,10,70,40);
显然画一个矩形需要四个参数,分别是起点(x,y),矩形宽度和长度。
也可以用来 strokeRect函数来实现同样的效果。
ctx.rect(10,10,70,40);
ctx.stroke();
如果绘制实心矩形,可以用fillRect函数画实行矩形。
而画实心是需要C来定义图形颜色。
实例
Document
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=5;
ctx.strokeStyle="red";
ctx.beginPath();
ctx.strokeRect(10,10,70,40);
Document
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=5;
ctx.strokeStyle="red";
ctx.fillStyle="blue";
ctx.beginPath();
ctx.rect(10,10,70,40);
ctx.fillRect(10,10,70,40);
ctx.stroke();
领取专属 10元无门槛券
私享最新 技术干货