我已切换到kineticJS,我试图让背景图像重复出现。这是我正在使用的代码:
var background_image = new Image();
background_image.onload = function() {
var image = new Kinetic.Image({
image: background_image,
width: this.width,
height: this.height
});
mainLayer.add(image);
stage.add(mainLayer); // now mainLayer is available
};
现在我想要做的就是本教程的作用: http://www.html5canvastutorials.com/tutorials/html5-canvas-patterns-tutorial/:
该教程利用canvas / context对象重复图像。我无法在文档中找到图像重复,所以我想知道是否可以访问我的舞台(或图层?)的主要上下文元素,然后使用与教程类似的内容。
答案 0 :(得分:8)
尝试使用带图像填充的Rect。默认情况下会重复图像填充。这是一个例子:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-set-fill-with-kineticjs/
您还可以更改图案重复类型,使用偏移和缩放图案图像
干杯!