Canvas 基本功能-画矩形

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();