Canvas 繪製圖片(drawImage())
阿新 • • 發佈：2019-02-05
demo.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border:1px solid red; } img { display: none; /* 隱藏img標籤,讓影象在canvas畫布上顯示 */ } </style> </head> <body> <canvas id="cvs" width="500" height="500"></canvas> <img src="./imgs/youyouyou.jpg"> <script> var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d'); var img = document.querySelector('img'); /* * ctx.drawImage() * 繪製圖像，有三種使用方式。 * */ /* * 第一種，三引數版本： * 把影象繪製到指定的座標。 * */ // 必須要在img影象載入完畢之後使用 /*img.onload = function() { //bug: 如果圖片是從快取中載入(比較快),圖片載入完後,才會註冊載入事件,那麼就不會監聽到載入事件。 解決:在下方手動為img標籤指定src屬性的值。 ctx.drawImage( img, 10, 10 ); }*/ //img.src = "..."; //可以保證先註冊onload事件,後加載圖片。 /************************************************* * 第二種，五引數版本： * 把影象繪製到指定的座標，並指定其大小。 * */ /*img.onload = function() { ctx.drawImage( img, 10, 10, 200, 200 ); }*/ /************************************************** * 第三種，九引數版本： * 把裁剪到的部分影象繪製到指定的座標，並指定其大小。 * */ img.onload = function() { ctx.drawImage( img, 300, 100, 400, 400, //裁剪的位置,裁剪大小 10, 10, 200, 200 ); //顯示位置,顯示大小 } //img.src = "..."; //可以保證先註冊onload事件,後加載圖片。 </script> </body> </html>