关于canvas中的repeat

「已注销」 2017-04-23 08:52:32

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript之Canvas</title>
</head>
<body>

<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
<img src="1.jpg" width=200 height=200 alt="图片">

<script>

var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在取得上下文对象
if (canvas.getContext) {
var context = canvas.getContext("2d");

var img = document.images[0];
var pattern = context.createPattern(img, "repeat");
context.fillStyle = pattern;
context.fillRect(0, 0, 200, 200);

}

</script>
</body>
</html>

代码如上，想要的效果是重复显示，为何出来的效果是黑色填充了矩形，而不是重复显示图像？求老司机。

...全文

173 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

「已注销」 2017-04-23

打赏
举报

3q，我在做其它图像绘制时，都加了的，唯独这个没想起。

天际的海浪 2017-04-23

打赏
举报

必须要等图片加载完成才能在 canvas中使用


var canvas = document.getElementById("canvas");
//检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
if (canvas.getContext) {
	var context = canvas.getContext("2d"); 
	var img = document.images[0];
	img.onload = function () {
	    var pattern = context.createPattern(img, "repeat");
	    context.fillStyle = pattern;
        context.fillRect(0, 0, 200, 200);
	}
}