绘制矩形
·指定正方形的边长
·指定正方形的位置点¯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;
}
