試試看Canvas

這篇也是前一個Blog的文章，最近在整理就一起拿出來。

Canvas挺有趣的，在一年前試過，而網路上也有相當多的library，但是在使用lib前還是先簡單了解一下canvas的運作吧。

參考：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage

來源：http://cssdeck.com/labs/css3-webkit-vertical-scrollbars

初入HTML5 Canvas

HTML Canvas標籤

裡面的字當然是不必要的，只是瀏覽器不支援canvas的話就會顯示，而canvas標籤是繪製canvas必要的元素，和img元素不同，他必須要結尾的標籤。

<canvas id="canvas" width="300" height="300">
  Sorry, your browser doesn't support the <canvas> element.
</canvas>

Rendering context

這是指渲染的方式，而就我所參考的範例，將會用2D呈現，當然也是能夠有3D的渲染方式(看瀏覽器支援程度)。

參考：http://www.w3school.com.cn/htmldom/met_canvas_getcontext.asp

var _canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

Canvas

接下來就可以利用js把canvas繪製入canvas內了。

var _canvas = document.getElementById('canvas');

if (_canvas.getContext) { //判斷是否支援
  var ctx = canvas.getContext('2d');
  //宣告ctx渲染方式

  draw();
  //執行draw function

}else {
  alert('your browser not support canvas')
  //如果不支援
};

function draw(){
  //利用ctx開始繪製
  ctx.fillStyle = "rgb(200,0,0)";
  //fillStyle:定義用於繪畫的顏色填充模式

  ctx.fillRect (10, 10, 55, 50);
  //fillRect:繪製被填充的矩形

  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.fillRect (30, 30, 55, 50);
  //同上
}

這樣就繪製了一個簡易的Canvas圖形，跟SVG落差非常大呢。

繪製其他圖形

參考：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/

畫一些方形

在上一次開始canvas後，接下來要畫一些東西，並了解他一些簡單的參數設定。

fillRect(x, y, width, height)
  //畫一個填滿色彩的正方形
strokeRect(x, y, width, height)
  //畫一個正方形線段外框
clearRect(x, y, width, height)
  //清除一個正方形區塊，並且讓它顏色透明

 var _canvas2 = document.getElementById('canvas2');

  if (_canvas2.getContext) {
    var ctx = canvas2.getContext('2d');
    draw2();
  }

function draw2(){
  ctx.fillStyle = "rgb(200,0,0)"; //正方形的填滿色彩
  ctx.fillRect (10, 10, 130, 130); //繪製一個填滿色彩的正方形
  ctx.clearRect(20, 20, 110, 110); //摟空一個正方形區域

  ctx.strokeStyle = "rgb(0,200,0)"; //正方形線段的色彩
  ctx.strokeRect(40, 40, 70, 70); //畫一個正方形線段
}

畫一些路徑

beginPath()
  //建立一個線段，如果需要畫線段必須要建立一個新線段
closePath()
  //線段的結尾，這並不是必需的
stroke()
  //線段上色(筆畫)
fill()
  //線段填滿顏色

其實這邊的觀念和adobe illustrator相當類似，Illustrator 中的線段一樣分為填色和筆畫，也有分為是不是封閉取線。

 var _canvas3 = document.getElementById('canvasB');

  if (_canvas.getContext) {
    var ctx = canvas3.getContext('2d');
    draw3();
  }

function draw3(){
    ctx.beginPath(); //線段開始
    ctx.moveTo(20,100); //從20,100的點
    ctx.lineTo(130,100); //畫線段到130,100
    ctx.lineTo(75,25);
    ctx.fill(); //填滿
  }

Move To

要畫一個好看的圖案太難了(崩潰)，所以我直接參考上面的提供的網址。

//要畫一個好看的圖案太難了，所以我直接參考上面的提供的網址。
function draw4(){
    ctx.strokeStyle = "rgb(220,200,45)"; //線段顏色
    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // 最外圈的線段
    ctx.moveTo(110,75); //跳到另一個線段
    ctx.arc(75,75,35,0,Math.PI,false);   // 嘴巴
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
    ctx.stroke(); //筆畫上色
  }

這些是舊的部落格文章，最近整理出來的部分。