<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
</head>
<body style="width:100%; height:100%;">
圖片： <img id="qq" width="200" height="auto" src="Images/timg (2).jpg" />
畫布： <canvas id="test" width="600" height="360">您的瀏覽器不支持 HTML5 canvas 標簽。</canvas><br />
畫布： <canvas id="test2" width="600" height="360">您的瀏覽器不支持 HTML5 canvas 標簽。</canvas>
<script>
//圖片填充1
var test = document.getElementById("test");
var testC = test.getContext("2d");
window.onload = function () {
var img = document.getElementById("qq");
var pat = testC.createPattern(img, "no-repeat");
testC.fillStyle = pat;
testC.fillRect(30, 30, 480 + 30, 240 + 30);
}
//注：由於360極速模式下圖片是異步加載的，因此需要onload去兼容360瀏覽器極速模式
//圖片填充2
var test2 = document.getElementById("test2");
var testC2 = test2.getContext("2d");
var img2 = new Image();
img2.onload = function () {
var pat = testC2.createPattern(img2, "no-repeat");
testC2.fillStyle = pat;
testC2.fillRect(30, 30, 480 + 30, 240 + 30);
}
img2.src = "Images/timg (2).jpg";
//注：img預加載模式下，onload應該放在為src賦值的上面，以避免已有緩存的情況下無法觸發onload事件從而導致onload中的事件不執行的情況發生
</script>
</body>
</html>
作者：leona
原文鏈接：http://www.cnblogs.com/leona-d/p/6361390.html
版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接