php網(wǎng)站優(yōu)點(diǎn)廈門(mén)seo培訓(xùn)
canvas有三種用法
- 三參數(shù)
context.drawImage(img,x,y)
img: 要使用的圖像、畫(huà)布、視頻
x：在畫(huà)布上放置圖像的x坐標(biāo)
y：在畫(huà)布上放置圖像的y坐標(biāo)
例子
HTML:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><img id="picture" src="./cloud.png" alt="test" /><canvas id="canvas" style="border:1px solid #aaa; display:block; margin:50px"></canvas><script>window.onload = function() {var canvas = document.getElementById("canvas");canvas.width = 400;canvas.height = 400;var context = canvas.getContext("2d")var pic = document.getElementById("picture")context.drawImage(pic,0,0)//context.drawImage(pic,20,0) 下圖展示//context.drawImage(pic,100,0) 下圖展示}</script>
</body>
</html>
參數(shù)中的x，y只會(huì)控制圖像在canvas中開(kāi)始畫(huà)的位置
- 五參數(shù) 可以進(jìn)行圖片縮放
context.drawImage(img,x,y,width,height);
img: 要使用的圖像、畫(huà)布、視頻
x：在畫(huà)布上放置圖像的x坐標(biāo)
y：在畫(huà)布上放置圖像的y坐標(biāo)
width：在canvas里畫(huà)出的圖像的寬（可以理解為縮放
height：在canvas里畫(huà)出的圖像的高（可以理解為縮放
可以實(shí)現(xiàn)一些縮放的需求
在代碼中這樣寫(xiě)
context.drawImage(pic,0,0,100,100)//會(huì)使圖像縮成一個(gè)100*100
- 九參數(shù) 可以進(jìn)行圖片裁剪+縮放
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
！！！這個(gè)方法用一句話總結(jié)就是：先裁剪再縮放！
在一個(gè)圖上（sx，sy）位置開(kāi)始，裁剪出一個(gè)寬為swidth，高為sheight的圖，然后按照width*height的尺寸進(jìn)行縮放，在canvas的（x，y）位置開(kāi)始畫(huà)出來(lái)
img: 要使用的圖像、畫(huà)布、視頻
sx：在原圖上開(kāi)始裁剪的x坐標(biāo)位置
sy：在原圖上開(kāi)始裁剪的y坐標(biāo)位置
swidth：要從原圖上裁出的寬度
sheight：要從原圖上裁出的高度
x：在畫(huà)布上放置圖像的x坐標(biāo)
y：在畫(huà)布上放置圖像的y坐標(biāo)
width：在canvas里畫(huà)出的圖像的寬（可以理解為縮放
height：在canvas里畫(huà)出的圖像的高（可以理解為縮放
在代碼中這樣寫(xiě)
context.drawImage(pic,0,0,172,314,0,0,86,157)
可以看出圖像是在原圖的（0，0）位置裁剪出172314的圖，然后將這個(gè)裁剪好的圖畫(huà)在canvas的（0，0）位置，縮放成86157的尺寸
也就是 先裁剪再縮放！
代碼這樣寫(xiě)，也就是按照172*314進(jìn)行裁剪，按照原尺寸畫(huà)出來(lái)（沒(méi)有縮放）
context.drawImage(pic,0,0,172,314,0,0,172,314)
