HTML5之帆布（canvas）（四）

绘制矩形

·指定正方形的边长

·指定正方形的位置点¯x和ÿ

·设置正方形的属性

·绘制正方形

//画正方形

functiondrawSquare(canvas,context) {

varw =Math.floor(Math.random() *40);

varx =Math.floor(Math.random() * canvas.width);

vary =Math.floor(Math.random() * canvas.height);

context.fillStyle ="lightblue";

context.fillRect(x,y,w,w);

}绘制线

·beginPath方法方法告诉画布开始一个新路径

·的moveTo方法把画笔移到画布上的指定点

·了lineTo方法描绘路径，从画笔的当前位置描绘到画布上的另一个点

·调用closePath方法将路径的起始点连接到当前路径的最后一个点

//绘制线

functiondrawLine(canvas, context) {

context.beginPath();

context.moveTo(100,150);

context.lineTo(250,75);

context.lineTo(125,30);

context.closePath();

context.lineWidth =5;

context.stroke();

context.fillStyle ="red";

context.fill();

}

绘制圆形

·创建一个路径

·填充弧方法参数

·设置圆的属性

·填充圆

先来分析弧方法

context.arc(x,y,radius,startAngle,endAngle.direction);

·点¯x和Y：确定圆心在画布上的位置

·半径：圆的半径

·由startAngle：圆弧的起始角，确定路径的起点，可以为负值（表示按负方向度量），单位为弧度

·endAngle：圆弧的终止角，确定路径的终点，可以为负值（表示按负方向度量），单位为弧度

·方向：真表示逆时针画弧，虚假表示顺时针画弧

//画圆形

functiondrawCircle(canvas,context) {

varradius =Math.floor(Math.random() *40);

varx =Math.floor(Math.random() * canvas.width);

vary =Math.floor(Math.random() * canvas.height);

context.beginPath();

context.arc(x,y,radius,0,degreeToRadians(360),true);

context.fillStyle ="red";

context.fill();

}

//度数转弧度

functiondegreeToRadians(degree) {

return(degree *Math.PI) /180;

}