<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
</head>
<body style="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
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接