H5 新增标签canvas 画布
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 画布的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: boss挑战赛中都有哪些会飞的坦克
- 下一篇: 调用第三方API的方法HttpClien