canvas是寫在body中的標簽，設置寬高后，通過JS來往其中繪制想要的內容，

canvas可以理解為一個畫板，而JS就是你的畫筆、

1.獲取到畫布

var canvas = document.getElementById("canvas");

2.getContext() 方法可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性。

var cxt = canvas.getContext("2d")

繪制文字

1.先設置字體樣式

　　cxt.font = "bold 30px 黑體 ";

2.設置字體顏色

　　cxt.fillStyle = 'green';

3.設置字體內容

　　cxt.fillText('我是文字',50,60)
　　在字體內容中，cxt.fillText（文本內容，X軸，Y軸）

并且在文本內容中，fill為實心，stroke為空心

fillStyle適用于所有實心內容；

strokeStyle適用于所有空心內容；

繪制矩形（以坐上角為繪制點）：

fill / stroke Rect(x,y,w,h)

x : x軸的位置

y:y軸的位置

w:矩形的寬

h:矩形的長

繪制矩形陰影

　陰影模糊距離

ctx.shadowBlur=20;
陰影模糊顏色

ctx.shadowColor="black";

在畫布中繪制了元素后，清除畫布元素
cxt.clearRect(x,y,w,h);
x  y  指的是坐標，w h 是清除的范圍大小

漸變色：cxt.createLinearGradient(x0,y0,x1,y1)
這是創建一個漸變對象
然后根據漸變，設置相應顏色
addColorStop(0,"red");
addColorStop(0.5,"#456");
漸變色可以是矩形，也可是圓形，文字等，但是要搭配著他們使用
例如設置好漸變色后，繪制漸變矩形

　　cxt.fillStyle = grad;
　　cxt.fillRect(0,0,400,300);

扇形漸變
cxt.createRadialGradient(x0,y0,r0,x1,y1,r1)

例：

var grad = cxt.createRadialGradient(150,150,0,150,150,150);
grad.addColorStop(0,"red");
grad.addColorStop(0.5,"blue");
grad.addColorStop("1","yellow");

cxt.fillStyle = grad;
cxt.fillRect(0,0,300,300)

效果圖

設置文字模糊

context.shadowBlur = 5 （模糊程度）

context.shadowColor = "red"; （模糊顏色）

context.shadowOffsetX = -20; （模糊顏色X軸距離）

context.shadowOffsetY = -20; （模糊顏色Y軸距離）

context.font = "40px 微軟雅黑"; (設置字體)

context.fillText("內容",x,y); （初始文字內容和位置）

設置路徑

1.創建路徑

context.beginPath();

2.線條開始路徑

context.moveTo(x，y);

3.第一個轉折點

context.lineTo(x，y);

　　可以設置多個轉折點，

4.關閉路徑

context.closePath();

5.設置線條粗細

context.lineWidth = 2;

6.填充

context.fill()

例

路徑畫圓形

1.繪制路徑

context.beginPath();

2.繪制圓形

context.arc(x,y,r,sAngle,eAngle,counterclockwise） （counterclockwise為設置順時針或逆時針旋轉，默認為false ，也就是順時針旋轉）

context.arc(280,60,50,0,Math.PI * 2);

3.關閉路徑

context.closePath();

4.空心圓
context.stroke() context.fill() （實心圓）

例：

舉個半圓例子

規定范圍后就是一個豎著的半圓

canvas引入圖片

先new一個圖片

再設置其路徑

這里要注意一個網頁加載的問題

window.onload是在頁面資源加載完成后，才去執行，所以畫布中的圖片引入加載不能使用這個

這樣才是畫布的引入圖片加載正確的方式

context.drawImage(myimg,x,y,w,y);

x y 是圖片位置，根據圖片左上角定義；

w y 是設置圖片大小，若不設置則默認圖片大小

平鋪圖片

關鍵是這一句

context.createPattern(myimg,"repeat");

repeat表示平鋪

例：

切割圖片

首先還是要引入一張圖片

引入圖片后，創建路徑

context.beginPath();

繪制切割方式，

　　1.矩形切割

context.rect(120,20,150,100);

　　2.關閉路徑

context.closePath();

　　3.設置切割

context.clip();

效果：

　　第二種，圓形切割

context.arc(180,70,50,0,Math.PI*2)

效果：

canvas 旋轉

cxt.rotate(deg);//旋轉 deg--角度

cxt.translate(x,y);//可以改變畫布的原點位置

cxt.save();//保存

cxt.restore();//返回至最近一次保存的狀態

總結

以上是生活随笔為你收集整理的H5 新增标签canvas 画布的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。