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;

}