canvas繪圖的基本步驟「canvas畫矩形的到的方法」

一、用canvas畫圓弧

用canvas畫圓弧畫圓弧有兩種方法：

1、arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y) 為圓心，以r 為半徑，從 startAngle 弧度開始到endAngle弧度結束。anticlosewise 是布爾值，true 表示逆時針，false 表示順時針(默認是順時針)。

startAngle,endAngle是弧度，用角度時候如下所示(Math.PI / 180) * angle，angle換成角度即可。

arc(x0, y0, r1, (Math.PI / 180) * 35, (Math.PI / 180) * 145, false);

角度是以x軸正方向為0°，x軸負方向是180°，正好用canvas畫了個圖，現學現用。至於哪邊是順時針還是逆時針，看你的anticlockwise 參數了。

function draw(){
var canvas = document.getElementById('canvas');   //  獲取canvas標籤
   if (!canvas.getContext) return;
var ctx = canvas.getContext('2d'); 
  
  // 畫的x軸
    ctx.moveTo(60,150);  
    ctx.lineTo(240,150);  
    ctx.stroke();  
  
    // 畫的y軸
    ctx.moveTo(150,60);  
    ctx.lineTo(150,240);  
    ctx.stroke();  

    // 畫的圓
    ctx.beginPath();
    ctx.arc(150, 150, 60, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
    ctx.closePath();
    ctx.stroke();  

  // 畫的畫的x軸箭頭
    ctx.beginPath();
    ctx.moveTo(240,145);  
    ctx.lineTo(240,155);  
    ctx.lineTo(250,150); 
    ctx.closePath();
    ctx.stroke(); 
    ctx.fill() 

  // 畫的畫的y軸箭頭
    ctx.beginPath();
    ctx.moveTo(145,60);  
    ctx.lineTo(155,60);  
    ctx.lineTo(150,50); 
    ctx.closePath();
    ctx.stroke(); 
    ctx.fill() 

  // 標上"0","180"
    ctx.fillText("0", 240, 170);
    ctx.fillText("180", 60, 170);
}

draw()

注意：ctx.beginPath();ctx.closePath();有時候感覺可有可無。最好還是用上，因為不結束路徑，有時候你再次畫線會和上次的線連上了。

2、arcTo(x1, y1, x2, y2, radius): 根據給定的控制點和半徑畫一段圓弧，最後再以直線連接兩個控制點。

function draw(){
    var canvas = document.getElementById('canvas');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
  
    ctx.beginPath();
    ctx.moveTo(50, 50);
      //參數1、2：控制點1坐標   參數3、4：控制點2坐標  參數4：圓弧半徑
    ctx.arcTo(200, 50, 200, 200, 100);
    ctx.lineTo(200, 200)
    ctx.stroke();
    
    ctx.beginPath();
    ctx.rect(50, 50, 10, 10);
    ctx.rect(200, 50, 10, 10)
    ctx.rect(200, 200, 10, 10)
    ctx.fill()
}
draw();

arcTo 方法的說明：

這個方法可以這樣理解。繪製的弧形是由兩條切線所決定。

第 1 條切線：起始點和控制點1決定的直線。

第 2 條切線：控制點1 和控制點2決定的直線。

其實繪製的圓弧就是與這兩條直線相切的圓弧

二、用canvas畫矩形

canvast 提供了三種繪製矩形的方法：

1、fillRect(x, y, width, height)：繪製一個填充的矩形。
2、strokeRect(x, y, width, height)：繪製一個矩形的邊框。
3、clearRect(x, y, width, height)：清除指定的矩形區域，然後這塊區域會變的完全透明。

function draw(){
    var canvas = document.getElementById('canvas');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.fillRect(10, 10, 100, 50);     // 繪製矩形，填充的默認顏色為黑色
    ctx.strokeRect(10, 70, 100, 50);   // 繪製矩形邊框
    ctx.clearRect(20, 20, 40, 30)   // 清除一個矩形區域
}
draw();

畫一個漸變色的矩形。

function draw(){
    var canvas = document.getElementById('canvas');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");

  // 創建漸變的樣式1
    var grd=ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"green");
    grd.addColorStop(1,"white");
  
  // 創建漸變的樣式2
    var rrd=ctx.createLinearGradient(0,200,0,0);
    rrd.addColorStop(0,"red");
    rrd.addColorStop(1,"white");
  
    // 創建漸變的樣式3
  var crd=ctx.createRadialGradient(155,130,10,155,130,100);
    crd.addColorStop(0,"blue");
    crd.addColorStop(1,"white");

 
    ctx.fillStyle=grd; // 用第一種樣式畫矩形
    ctx.fillRect(10,10,150,80);

    ctx.fillStyle=rrd;// 用第二種樣式畫矩形
    ctx.fillRect(10,100,80,150);
  
   ctx.fillStyle=crd;// 用第三種樣式畫矩形
    ctx.fillRect(80,100,150,60);
}
draw();

漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。

以下有兩種不同的方式來設置Canvas漸變：

createLinearGradient(x,y,x1,y1) – 創建線條漸變
createRadialGradient(x,y,r,x1,y1,r1) – 創建一個徑向/圓漸變

當我們使用漸變對象，必須使用兩種或兩種以上的停止顏色。

addColorStop()方法指定顏色停止，參數使用坐標來描述，可以是0至1.

使用漸變，設置fillStyle或strokeStyle的值為漸變，然後繪製形狀，如矩形，文本，或一條線。

Canvas 繪製文本

使用 canvas 繪製文本，重要的屬性和方法如下：

font – 定義字體
fillText(text,x,y) – 在 canvas 上繪製實心的文本
strokeText(text,x,y) – 在 canvas 上繪製空心的文本

function draw(){
    var canvas = document.getElementById('canvas');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");

    ctx.font="20px Arial";
    ctx.fillText("美好的一天！",10,50);

    ctx.font="30px Arial";
    ctx.strokeText("美好的一天！",10,100);
}
draw();