日期：2020 年 5 月 8 日
canvas 學(xué)習(xí)筆記
canvas 簡(jiǎn)介
canvas 是一個(gè)用來繪圖的 html5 標(biāo)簽，但是 < canvas> 標(biāo)簽本身并不具備繪圖能力，實(shí)際的繪圖需要借助 js 腳本來完成，而具體做這件事情的就是 getContext('2d') 這個(gè)對(duì)象，這個(gè)對(duì)象提供的各種屬性及方法可以讓我們很方便地完成線條，圖形，文字，圖像等的繪制
以下為使用 canvas 的幾個(gè)最基本的繪圖功能
畫線
<canvas id="myCanvas"
width="200"
height="100"
style="border: 1px solid #000"
>
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽
</canvas>
<script>
let c = document.getElementById('myCanvas')
let cxt = c.getContext('2d')
cxt.moveTo(0,0)
cxt.lineTo(50,50)
cxt.lineTo(70,15)
cxt.lineTo(90,90)
cxt.stroke()
</script>
效果：
畫線
這里有幾個(gè)路徑相關(guān)的方法需要注意：
- moveTo() 把路徑移動(dòng)到畫布中的指定點(diǎn)，不創(chuàng)建線條
- lineTo() 添加一個(gè)新點(diǎn)，然后在畫布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條
- stroke() 繪制已定義的路徑
繪制矩形
<!DOCTYPE html>
<html lang="en">
<body>
<canvas id="myCanvas"
width="200"
height="100"
style="border: 1px solid #000"
>
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽
</canvas>
<script>
let c = document.getElementById('myCanvas')
let cxt = c.getContext('2d')
cxt.beginPath()
cxt.fillStyle = '#FF0000'
cxt.fillRect(10,10,50,50)
cxt.closePath()
cxt.beginPath()
cxt.strokeStyle = '#FF0000'
cxt.strokeRect(70,10,100,50)
cxt.closePath()
</script>
</body>
效果:
畫方
這里需要注意的有兩點(diǎn)：
- 填充顏色與路徑顏色：
fillStyle : 設(shè)置填充的顏色、漸變或模式
strokeStyle : 設(shè)置筆觸（路徑）的顏色、漸變或模式 - 繪制實(shí)心矩形與空心矩形：
fillRect() : 繪制實(shí)心矩形，參數(shù)為左上角的坐標(biāo)及矩形寬高
strokeRect() : 繪制空心矩形，參數(shù)為左上角的坐標(biāo)及矩形寬高
繪制圓（弧）形
<canvas id="myCanvas"
width="200"
height="100"
style="border: 1px solid #000"
>
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽
</canvas>
<script>
let c = document.getElementById('myCanvas')
let cxt = c.getContext('2d')
cxt.beginPath()
cxt.arc(50,50,40,0,2*Math.PI)
cxt.stroke()
cxt.beginPath()
cxt.arc(150,50,40,0,1.5*Math.PI)
cxt.stroke()
</script>
效果：
畫弧
這里要注意繪制圓（?。┬斡玫降姆椒ㄊ?arc() 方法，該方法接受5個(gè)固定參數(shù)合一個(gè)可選參數(shù)，如下：
arc()方法參數(shù)
顏色漸變
1、線性漸變
<canvas id="myCanvas"
width="200"
height="100"
style="border: 1px solid #000"
>
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽
</canvas>
<script>
// 線性漸變
let c = document.getElementById('myCanvas')
let cxt = c.getContext('2d')
cxt.beginPath()
let grd1 = cxt.createLinearGradient(0,0,0,50) // 創(chuàng)建從上往下的線性漸變
grd1.addColorStop(0, 'black')
grd1.addColorStop(1, 'white')
cxt.fillStyle = grd1
cxt.fillRect(10,10, 150,50)
cxt.closePath()
cxt.beginPath()
let grd2 = cxt.createLinearGradient(0,0,150,0) // 創(chuàng)建從左往右的線性漸變
grd2.addColorStop(0, 'black')
grd2.addColorStop(1, 'white')
cxt.fillStyle = grd2
cxt.fillRect(10,70, 150,20)
cxt.closePath()
</script>
效果:
線性漸變
這里用到的方法是 createLinearGradient() , 該方法接受四個(gè)參數(shù)，前兩個(gè)參數(shù)為漸變開始的點(diǎn) 的坐標(biāo)，后兩個(gè)參數(shù)為漸變結(jié)束的點(diǎn)的坐標(biāo)，以此來確實(shí)漸變的方向
2、放射性漸變
<canvas id="myCanvas"
width="200"
height="100"
style="border: 1px solid #000"
>
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽
</canvas>
<script>
let c = document.getElementById('myCanvas')
let cxt = c.getContext('2d')
let grd = cxt.createRadialGradient(50,50,10,50,50,100)
grd.addColorStop(0, 'green')
grd.addColorStop(1, 'blue')
cxt.fillStyle = grd
cxt.fillRect(10,10, 150,80)
</script>
效果：
放射形漸變
文字繪制
<canvas id="myCanvas1"
width="200"
height="100"
style="border: 1px solid #000"
>
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽
</canvas>
<canvas id="myCanvas2"
width="200"
height="100"
style="border: 1px solid #000"
>
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽
</canvas>
<script>
// 實(shí)心文字
let c1 = document.getElementById('myCanvas41)
let cxt1 = c1.getContext('2d')
cxt1.font = '15px Arial'
cxt1.fillText('canvas text', 20,20)
// 空心文字
let c2 = document.getElementById('myCanvas2')
let cxt2 = c2.getContext('2d')
cxt2.font = '20px Arial'
cxt2.strokeText('canvas text', 50,50)
</script>
效果：
繪制文字
這里要注意的是繪制文字的時(shí)候需要設(shè)置字號(hào)及字體，可以通過 font 屬性設(shè)置
繪制文字有 fillText() 和 strokeText() 兩個(gè)方法，他們都接受3個(gè)參數(shù)，需要繪制的文字，及文字開始繪制的位置坐標(biāo)，不同的是前一個(gè)方法用來繪制實(shí)心文字，而后一個(gè)方法用來繪制空心文字
圖像繪制
<image id="picture" src="via.jpg" width="140" height="90"></image>
<canvas
id="myCanvas"
width="200"
height="100"
style="border: 1px solid #000"
>
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽
</canvas>
<script>
// 繪制圖片
let c = document.getElementById('myCanvas')
let cxt = c.getContext('2d')
let pic = document.getElementById('picture')
pic.onload = function() {
cxt.drawImage(pic,10,10,140,90);
}
</script>
效果：
畫圖
上圖左側(cè)為一個(gè) <image> 標(biāo)簽，右側(cè)為通過 <canvas> 繪制出來的圖像，需要注意的是使用
canvas 繪制圖像需要在圖像加載完畢之后再進(jìn)行，即上述的 onload() 事件完成后進(jìn)行圖像繪制，繪制圖像使用的方法為 drawImage()，接受三個(gè)固定參數(shù)和6個(gè)可選參數(shù)，如下：
drawImage()方法參數(shù)
