canvas:即畫布的意思。標籤使用,是普通的html標籤。可以設定width和height屬性,但是單位必須為px。
設定canvas標籤的寬高是通過其屬性進行設定的,不要用css設定
ie9 以上才支援 canvas
你的瀏覽器不支援canvas,請公升級瀏覽器
canvas座標系,從左上角0,0開始,x向右增大,y向下增大。
第一步:拿到canvas標籤
var canvas = document.getelementsbytagname('canvas')[0];
第二步:拿到canvas的上下文,'2d'表示繪製2d畫筆。'webgl'表示3d畫筆
var ctx =canvas.getcontext("2d");
第三步:繪製,以下是繪製的基本步驟
1.設定繪製起點
ctx.moveto(x,y);
ctx.lineto(x,y);
3.閉合路徑
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...