HTML5之帆布（canvas）（四）

绘制矩形

· 指定正方形的边长

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

· 设置正方形的属性

· 绘制正方形

//画正方形

function drawSquare(canvas,context) {

    var w = Math.floor(Math.random() * 40);

 

    var x = Math.floor(Math.random() * canvas.width);

    var y = Math.floor(Math.random() * canvas.height);

 

    context.fillStyle = "lightblue";

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

}绘制线

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

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

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

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

//绘制线

function drawLine(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：圆弧的终止角，确定路径的终点，可以为负值（表示按负方向度量），单位为弧度

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

//画圆形

function drawCircle(canvas,context) {

 

    var radius = Math.floor(Math.random() * 40);

 

    var x = Math.floor(Math.random() * canvas.width);

    var y = Math.floor(Math.random() * canvas.height);

 

    context.beginPath();

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

    context.fillStyle = "red";

    context.fill();

}

 

//度数转弧度

function degreeToRadians(degree) {

    return (degree * Math.PI) / 180;

}