canvas繪製基礎示例

canvas：即畫布的意思。標籤使用，是普通的html標籤。可以設定width和height屬性，但是單位必須為px。

設定canvas標籤的寬高是通過其屬性進行設定的，不要用css設定

ie9 以上才支援 canvas

你的瀏覽器不支援canvas，請公升級瀏覽器

第一步：拿到canvas標籤

var canvas = document.getelementsbytagname('canvas')[0];

var ctx =canvas.getcontext("2d");

1.設定繪製起點

ctx.moveto(x,y);

ctx.lineto(x,y);

ctx.closepath();

ctx.stroke();

ie9 以上才支援 canvas

你的瀏覽器不支援canvas，請公升級瀏覽器 

Canvas繪製基礎

繪製畫素點 canvas.drawpoint float x,float y,paint paint canvas.drawpoints float pts,paint paint canvas.drawpoints f float pts,int offset,int count,paint pa...

Canvas 繪製文字

filltext text，x,y maxwidth 填充文字 stroketext text，x,y maxwidth 描邊文字 font font 10px sans serif 預設 text anchor start 預設，文字對齊界線開始的地方 左對齊指本地從左向右，右對齊指本地從右向左 ...

Canvas 繪製直線

1.canvas繪圖是一種基於狀態的繪圖，繪圖的過程應該是先設定繪圖的狀態，再呼叫具體的函式進行繪製。例如繪製一條 100,100 到 700,700 的直線 context.moveto 100,100 設定起點狀態 context.lineto 700,700 設定末端狀態 context.li...