canvas元素的總結

2021-08-03 20:47:23 字數 1692 閱讀 1189

前言：最近在學習html5的新增屬性。一些語義化的標籤，和canvas。今天簡單總結一下canvas標籤的使用。
建立畫布

繪製矩形

繪製圓形

繪製文字

儲存檔案

1、建立畫布

id="mycanvas"


width="200"


height="100"


style="border:1px solid #000000;">


canvas>
2、繪製矩形

window.onload=function


(){var canvas=document.getelementbyid("mycanvas");


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


context.fillstyle="#ccc";


// 繪製實心矩形


context.fillrect(0,0,300,300);


// 繪製空心的矩形


context.strokestyle="red";


context.strokerect(300,300,300,300);
簡單總結：

首先獲取到id為mycanvas的元素；

然後建立context物件;

然後定義（實心，空心）繪製顏色;

最後使用fillrect（x,y,width,height）或者strokerect（）繪製;

3、繪製圓形

var c=document.getelementbyid("mycanvas");


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


ctx.beginpath();


ctx.arc(95,50,40,0,2*math.pi);


ctx.closepath();


/*繪製空心圓*/


ctx.stroke();


/*繪製實心圓*/


ctx.fill();
簡單總結：

首先是獲取到id為mycanvas的元素；

然後是獲取context物件；

開始繪製之前使用beginpath（）；

繪製函式arc（x,y,r,0,2*math.pi）;

結束繪製使用closepath（）；

使用stroke（）或者fill（）繪製；

4、繪製文字

var c=document.getelementbyid("mycanvas");


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


ctx.font="30px arial"


;/*實心*/


ctx.filltext("hello world",10,50);


/*空心*/


ctx.stroketext("hello world",10,50);
簡單總結：

前兩步同上；

設定文字的大小和字型；

開始繪製，使用filltext（text,x,y）或者stroketext（）；

5、儲存檔案

window.location = canvas.todataurl('image/png');

Canvas 元素繪製矩形

使用canvas元素，必須先設定 width 和 height 屬性，指定可以繪圖的區域大小。要在這塊畫布上繪圖，需要取得繪圖上下文。而取得繪圖上下文物件的引用，需要呼叫 getcontext 方法並傳入上下文的名字。傳入 2d 就可以取得2d上下文物件。與矩形相關的方法包括 fillrect st...

canvas學習總結

canvas的相容 獲取canvas寬高的兩種方法 api 繪製線條 什麼是 非0環繞 canvas繪圖中交叉路徑的填充問題，依據非零環繞原則，由順 逆時針穿插次數決定是否填充某一區域 非零環繞原理 判斷有自我交叉情況的路徑時，對於路徑中的任意給定區域，從該區域內部任意找乙個點作為起點，畫一條足夠長...

canvas畫布使用總結

h5自定義畫布 下面複製貼上就能用了 html部分 js部分 畫板 var canvas document.getelementbyid canvas var ctx canvas.getcontext 2d ctx.linewidth 1.0 canvas.addeventlistener tou...