- 創建canvas元素，
<canvas id="myCanvas" width="200" height="100"></canvas> - 使用id獲取canvas元素;
var c = document.getElementById("myCanvas"); - 創建context對象;
var cxt = c.getContext("2d");//此處為2d圖片 - 繪制圖形
cxt.fillStyle = "red";//定義顏色
ctx.fillRext(15,15,50,30);//定義矩形的開始的坐標，寬高fillRext(x,y,width,height);
//畫線
ctx.moveTo(0,15);//線開始的坐標；
ctx.lineTo(200,100);//線結束的坐標
ctx.stroke();// 執行畫線；
//畫圓的方法arc(x,y,r,start,stop);
ctx.beginPath();//創建一個路徑；
ctx.strokeStyle = "green";//設置圓線的顏色
ctx.arc(100,80, 60, 5*Math*PI);
ctx.stroke();
//制作文本，font-定義字體，fillText(text,x,y)-繪制實心文本，strokeText(text, x, y)-繪制空心文本;
ctx.font = "45px 微軟雅黑";//設置字體和大小;
ctx.fillText("Hello Word", 50, 50);
ctx.strokeText("JavaScript", 100,100);
//顏色漸變；createLinearGradient(x, y, x1, y1)-創建線條漸變;
//createRadialGradient(x, y, r, x1, y1, r1)-創建徑向/圓漸變;addColorStop()方法指定顏色停止，參數使用坐標來描述，可以0至1；
必須要有2種或者2種以上的停止顏色
var grd = ctx.createLinearGardient(0, 0, 300, 45);//創建線性漸變；
grd.addColorStop(0, "red");
grd.addColorStop(1, "green");
ctx.fillStyle = grd;
ctx.fillRect(45, 80, 60, 100);
//圓性漸變;
var grd = ctx.createRadialGradient(50, 99, 15, 100, 100, 25);
grd.addColorStop(0, "yellow");
grd.addColorStop(1, "red");
ctx.fillStyle = grd;
ctx.fillRect(25, 25, 150, 100);
注意：坐標是從左上角（0,0）位置開始
4.較為復雜的構圖
var canvas = document.getElementById("test");
ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.clearRect(0, 0, 200, 200);//擦除（0,0）位置大小位200*200的矩形,擦除是把該區域變成透明;
var path = new Path2D();//創建新路徑，Path繪制復雜的路徑;
path.arc(75, 75, 50, 0, Math.PI*2, true);//圓周的逆時針方向為true,順時針為false;
path.moveTo(100, 75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true)//左眼
path.moveTo(64, 64);
path.arc(90, 65, 5, 0, Math.PI*2, true);//右眼
ctx.strokeStyle = "blue";
ctx.stroke(path);
//復雜的文本
cxt.shadowOffsetX = 2;//shadowOffsetX設置或返回形狀的陰影的水平距離；
cxt.shadowOffsetY = 2;//shadowOffsetY設置或返回形狀陰影的垂直距離;
ctx.shadowBlur = 2;//返回或設置陰影的模糊等級;
ctx.shadowColor = "#555555";
ctx.font = "24px Arial";
ctx.fillStyle = "#333333";
ctx.fillText("fillText('text', x, y,)", 43, 54 );添加文本，和坐標
5.如何圖片放在canvas上；
var c = document.getElementById("test");
var ctx = c.getContext("2d");
var img = new Image();//定義圖片函數
img.src = "url";//圖片地址
ctx.drawImage(img, 20, 30);//ctx.drawImage(img, x, y, width,height);定義圖片在canvas上的坐標，寬高
以上是canvas基本用法，canvas3D功能沒有做記錄，
總之canvas的畫圖功能非常強大復雜；
