fun*_*ash 3 javascript html5 design-patterns canvas repeat
我想要一个重复的画布图案.可悲的是,我能找到的所有例子都重复一个图像.所以我试过这个:
function init() {
var canvas = document.getElementById("bg");
var ctx = canvas.getContext("2d");
//creating a new canvas
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 400;
var img = canvas.getContext("2d");
draw(img);
var objPattern = ctx.createPattern(img, "repeat");
ctx.fillStyle = objPattern;
ctx.fillRect(0, 0, document.body.clientHeight, document.body.clientWidth);
}
function draw(img) {
//img.save();
img.beginPath();
img.moveTo(0.0, 40.0);
img.lineTo(26.9, 36.0);
img.bezierCurveTo(31.7, 36.0, 36.0, 32.1, 36.0, 27.3);
img.lineTo(40.0, 0.0);
img.lineTo(11.8, 3.0);
img.bezierCurveTo(7.0, 3.0, 3.0, 6.9, 3.0, 11.7);
img.lineTo(0.0, 40.0);
img.closePath();
img.fillStyle = "rgb(188, 222, 178)";
img.fill();
img.lineWidth = 0.8;
img.strokeStyle = "rgb(0, 156, 86)";
img.lineJoin = "miter";
img.miterLimit = 4.0;
img.stroke();
//img.restore();
}
并将其包含在html文件中,如下所示:
<body onload="init()">
<canvas id="bg" width=100%; height=100%;></canvas>
…
我真的不想使用循环使用偏移"手动"重复模式,因为我觉得(并希望)应该有一个更简单的方法.一些教程和示例中使用了绘制代码中的保存和恢复,但它们对我没有任何意义,所以我对它们进行了评论.
Sim*_*ris 10
任何在Canvas中拍摄图像的东西都可以采用Canvas元素.
下面是制作图案的绘图代码示例,以及自定义图案功能,以防您需要更精细的控制.
这里要注意的关键是创建的画布只有40x40像素,足以容纳图案.