免費(fèi)AI編程助手
在通過(guò)一段時(shí)間的學(xué)習(xí)之后我們會(huì)發(fā)在html5中的canvas是很強(qiáng)大的，那么今天我們進(jìn)來(lái)說(shuō)說(shuō)有關(guān)于：“如何使用canvas中drawImage方法？”這方面的相關(guān)內(nèi)容吧！
不得不說(shuō)，html5中的canvas真的非常強(qiáng)大，從圖片處理，到視頻處理，再到游戲開(kāi)發(fā)，都能見(jiàn)到canvas的身影，然而，就這一個(gè)<canvas>標(biāo)簽，功能居然如此強(qiáng)大，這主要?dú)w功于canvas強(qiáng)大的API，也正是因?yàn)檫@么多的API，讓很多人對(duì)canvas望而卻步。
drawImage繪制圖片
drawImage是canvas提供的一個(gè)方法，通過(guò)這個(gè)函數(shù)我們可以把一張圖片繪制到canvas中。首先看看這個(gè)方法的聲明：
void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
先來(lái)解釋下幾個(gè)參數(shù)：
- image：要繪制的圖片，支持很多形式，比如
CSSImageValue，HTMLImageElement，SVGImageElement，HTMLVideoElement，HTMLCanvasElement，ImageBitmap或者OffscreenCanvas - dx：d代表目的（destination），就是canvas上起點(diǎn)的x軸
- dy：canvas上起點(diǎn)的y軸
- dWidth：canvas上繪制的寬度
- dHeight：canvas上繪制的高度
- sx：s代表原來(lái)的（source），就是原始圖片的起點(diǎn)的x軸
- sy：原始圖片的起點(diǎn)的y軸
- sWidth：截取的原始圖片的寬度
- sHeight：截取的原始圖片的高度
這么多的參數(shù)，我來(lái)用一句話總結(jié)下這個(gè)函數(shù)的功能：從任意位置截取指定大小的圖片并將其以指定大小繪制在canvas上的任意位置。這里截取的大小就是sWidth和sHeight來(lái)設(shè)置，dHeight和dWidth就是繪制的大小。
說(shuō)了這么多，來(lái)實(shí)際動(dòng)手做一下：
<div style="border: 1px solid black; width: 300px;height: 300px;">
<canvas id="c1" width="300" height="300"></canvas>
</div>
<script>
var c = document.getElementById('c1');
var ctx = c.getContext('2d');
var img = new Image();
img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599994255228&di=2f8ea231d1f1b557a73b0f1733bb71cf&imgtype=0&src=http%3A%2F%2Ff.01ny.cn%2Fforum%2F201206%2F28%2F143206f8u8ruk6eeqr7x3u.jpg";
img.onload = function (e) {
drawImg(this);
};
function drawImg (img) {
ctx.clearRect(0,0, c.width, c.height);
ctx.drawImage(img, 0,0, 200, c.height);
}
</script>
這里我這用了5個(gè)參數(shù)，我們來(lái)試下其他幾個(gè)參數(shù)，這里我就想要美女的頭像并把它繪制到中間：
ctx.drawImage(img, 200,150, 160, 180, 70, 60, 160, 180);
做一個(gè)圖片放大器
思路很簡(jiǎn)單，先獲取鼠標(biāo)位置的像素點(diǎn)，然后把它繪制成更大的區(qū)域，就實(shí)現(xiàn)了放大。話不多說(shuō)，先上效果圖：
代碼也很簡(jiǎn)單：
<div style="border: 1px solid black; width: 300px;height: 300px;">
<canvas id="c1" width="300" height="300"></canvas>
</div>這里需要注意的是，圖片資源不能跨域，比如這樣：
// 圖片改成百度的
img.src = https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599994255228&di=2f8ea231d1f1b557a73b0f1733bb71cf&imgtype=0&src=http%3A%2F%2Ff.01ny.cn%2Fforum%2F201206%2F28%2F143206f8u8ruk6eeqr7x3u.jpg;在getImageData是就會(huì)報(bào)錯(cuò)，說(shuō)是跨域了：
index.html:47 Uncaught DOMException: Failed to execute 'getImageData' on
'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
canvas中的抗鋸齒
所謂抗鋸齒，就是圖片放大到很大時(shí)，能否看到一個(gè)一個(gè)的像素點(diǎn)，能看到就說(shuō)明不抗鋸齒，canvas中默認(rèn)是開(kāi)啟了抗鋸齒的，也就是imageSmoothingEnabled這個(gè)屬性是true，開(kāi)啟抗鋸齒會(huì)破壞原有像素，像素之間是平滑過(guò)渡的，一般肉眼是看不出來(lái)的，我們來(lái)做個(gè)對(duì)比：
// 關(guān)閉抗鋸齒
ctx.imageSmoothingEnabled = false;明顯的對(duì)比，關(guān)閉抗鋸齒之后，放大區(qū)域像打了馬賽克，能明顯看到每個(gè)像素點(diǎn)，開(kāi)啟抗鋸齒的情況下每個(gè)像素點(diǎn)之間的漸變則很順暢，人眼看上去有種模糊的感覺(jué)。但從整個(gè)畫面看，關(guān)閉抗鋸齒后，圖片模糊了很多。
用canvas來(lái)渲染視頻
開(kāi)頭也說(shuō)過(guò)，canvas能處理視頻，現(xiàn)在我們用drawImage來(lái)渲染一個(gè)視頻。
先說(shuō)思路：每隔一段時(shí)間截取視頻的當(dāng)前幀，繪制出來(lái)。就是這么簡(jiǎn)單，上代碼：
<video id="video1" controls="" width="180" style="margin-top:15px;">
<source src="1.mp4" type="video/mp4">
</video>
<canvas id="c2" width="180" height="320"></canvas>
<script>
var v=document.getElementById("video1");
var c3=document.getElementById("c2");
ctx3=c3.getContext('2d');
var i = null;
// 每20ms截取視頻幀
v.addEventListener('play',function() {
i = window.setInterval(function() {
ctx3.drawImage(v,0,0, 180, 320)
},20);
}, false);
v.addEventListener('pause',function() {
window.clearInterval(i);
i = null;
},false);
v.addEventListener('ended', function() {
clearInterval(i);
i = null;
},false);
</script>效果：
cool， 左側(cè)是video標(biāo)簽顯示的視頻，右側(cè)是我們用canvas繪制的，每20毫秒繪制一次，很棒哦。如果我們把時(shí)間放長(zhǎng)一點(diǎn)，就能實(shí)現(xiàn)卡頓的效果??
drawImageData兼容性
那么以上分享的就是有關(guān)于：“如何使用canvas中drawImage方法？”這方面的相關(guān)內(nèi)容分享，當(dāng)然如果你堅(jiān)持看完的話那么對(duì)你的收獲那自然就是屬于自己的東西了！不僅如此如你對(duì)于html5這方面有著很大的興趣我們也可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！
