canvas繪製基礎示例

2021-08-22 00:03:36 字數 923 閱讀 1863

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...