Canavs初學

<canvas id="canvas" style="border:1px solid #f00;"></canvas>

公用js:

var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 600;//此處也可直接在標籤中添加width height屬性
var context = canvas.getContext("2d");

繪製直線：

context.moveTo(100,100);//狀態
context.lineTo(200,200);//狀態  直線
context.lineWidth = 6;
context.strokeStyle = "#00f";
context.stroke();//繪製邊框

效果如圖：

繪製三角形（空心）：

context.moveTo(100,100);//狀態  起點
context.lineTo(200,200);//狀態  直線
context.lineTo(100,200);
context.lineTo(100,100);//直角三角形

context.lineWidth = 6;//邊框寬度
context.strokeStyle = "#00f";//邊框顏色
context.stroke();//繪製邊框

效果如圖：

從效果圖中能夠看出最後的點並無徹底閉合，此處可以使用lineCap屬性，在上面代碼中加上

context.lineCap="round";//butt,round,square

效果以下：

只有最後一點是圓形，而另外兩個角處是非圓形（？？？？？？？）

繪製三角形（實心）：

context.moveTo(100,100);//狀態  起點
context.lineTo(200,200);//狀態  直線
context.lineTo(100,200);
context.lineTo(100,100);//直角三角形

context.lineWidth = 6;
context.lineCap = "round";
context.strokeStyle = "#00f";
context.stroke();//繪製邊框（邊框不能徹底閉合？？？？？？）

context.fillStyle="rgb(255,0,0)";
context.fill();//填充背景色

效果如圖：

在三角形（實心）基礎上繪製另外一條直線：

context.moveTo(100,100);//狀態  起點
context.lineTo(200,200);//狀態  直線
context.lineTo(100,200);
context.lineTo(100,100);//直角三角形

context.lineWidth = 6;
context.lineCap = "round";
context.strokeStyle = "#00f";
context.stroke();//繪製邊框（邊框不能徹底閉合？？？？？？）

context.fillStyle="rgb(255,0,0)";
context.fill();//填充背景色
//繪製另外一條直線
context.moveTo(200,100);
context.lineTo(300,200);
context.strokeStyle="#0f0";
context.lineWidth = 2;//此處寬度比上面寬度小，所以三角形邊框最內側會被新邊框覆蓋
context.stroke();

效果如圖：注意三角形邊框（設置寬度不一樣）

若將第二個的lineWidth 也設置爲6，效果以下圖：

//繪製另外一條直線
context.moveTo(200,100);
context.lineTo(300,200);
context.strokeStyle="#0f0";
context.lineWidth = 6;//此處寬度：2時比上面寬度小，所以三角形邊框最內側會被新邊框覆蓋
context.stroke();

context.fillStyle="#00f";
context.fill();

三角形邊框寬度明顯不爲6(???????)

繪製不一樣路徑使用beginPath及closePath：

context.beginPath();//開啓
context.moveTo(100,100);//狀態  起點
context.lineTo(200,200);//狀態  直線
context.lineTo(100,200);
context.lineTo(100,100);//直角三角形
context.closePath();//關閉

context.lineWidth = 6;
context.lineCap = "round";
context.strokeStyle = "#00f";
context.stroke();//繪製邊框（邊框不能徹底閉合？？？？？？）

context.fillStyle="rgb(255,0,0)";
context.fill();//填充背景色
//繪製另外一條直線
context.beginPath();//開啓
context.moveTo(200,100);
context.lineTo(300,200);
context.closePath();//關閉

context.strokeStyle="#0f0";
context.lineWidth = 6;//此處寬度：2時比上面寬度小，所以三角形邊框最內側會被新邊框覆蓋
context.stroke();

context.fillStyle="#00f";
context.fill();