1、Canvas是什么？
HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。
畫布是一個矩形區域，您可以控制其每一像素。
canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
2、創建 Canvas 元素
規定元素的 id、寬度和高度：
<canvas class="canvas" width="200px" height="200px"></canvas>
3、通過 JavaScript 來繪制
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d"); ?
cxt.fillStyle="#FF0000"; ?
cxt.fillRect(0,0,150,75); 4、通過JavaScript創建canvas
function createCanvas(){
document.body.innerHTML = ""
mycanvas =document.getElementByIdx("mycanvas");
context = mycanvas.getContext("2d");
}5、繪制矩形
function drawRect(){
context.fillStyle="#ff0000";
context.translate(100,200);//移動
context.scale(1,0.5);//縮放
context.rotate(30);//旋轉
context.fillRect(0,0,200,200);
}
6、繪制圖像
function drawImage(){
var img = new Image();
img.onload = function(){
context.drawImage(img,0,0);//三個參數圖片源對象、擺放的位置
}
img.src = "img/logo.png"
}
7、使用Canvas繪制直線
function pageLoad(){var c= $('mycanvas');var ctx = c.getContext('2d');ctx.moveTo(20,30);//第一個起點ctx.lineTo(120,90);//第二個點ctx.lineTo(220,60);//第三個點（以第二個點為起點）ctx.lineTo(250,90);//第四個點（以第二個點為起點）ctx.lineWidth=3;ctx.strokeStyle = 'blue';ctx.stroke();//stroke() 方法會實際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色。
} 8、繪制漸變曲線
function pageLoad2(){var can = $('mycanvas');var cans = can.getContext('2d');cans.moveTo(0,0);cans.lineTo(400,300);var grd = cans.createLinearGradient(0,0,400,300);//線性漸變的起止坐標grd.addColorStop(0,'red');//創建漸變的開始顏色，0表示偏移量，個人理解為直線上的相對位置，最大為1，一個漸變中可以寫任意個漸變顏色grd.addColorStop(0.5,'green');grd.addColorStop(1,'yellow');cans.lineWidth=20;cans.strokeStyle = grd;cans.stroke();
}
8、繪制一個線性漸變的矩形
function pageLoad2(){var can = $('mycanvas');var cans = can.getContext('2d');cans.moveTo(0,0);cans.lineTo(400,300);var grd = cans.createLinearGradient(0,0,0,100);//線性漸變的起止坐標grd.addColorStop(0,'red');//創建漸變的開始顏色，0表示偏移量，個人理解為直線上的相對位置，最大為1，一個漸變中可以寫任意個漸變顏色grd.addColorStop(0.5,'green');grd.addColorStop(1,'yellow');cans.fillStyle=grd;cans.fillRect(0,0,200,100);
}
?
