是否可以使用图像而不是颜色“填充”HTML5画布上的形状?
我画了一堆形状(各种角落的正方形以45度角切掉)。我希望能够用图像“填充”这些形状,而不是颜色。目前我已经说了一句话:
context.fillStyle = '#123456' // example fill color
我正在寻找的是:
context.fillStyle = 'url(http://www.myimagereference.com/image.png)';
我知道我不能以这种方式使用fillStyle - 但还有另一种方法来实现这种事情吗?
答案 0 :(得分:16)
你可能想看看createPattern
下面是一个简单的代码,演示了如何使用 createPattern
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var w = canvas.width = 256;
var h = canvas.height = 256;
var img = new Image();
img.src = "http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG";
img.onload = function () {
var pattern = ctx.createPattern(img, "repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, w, h);
};
答案 1 :(得分:11)
您可以通过定义与您的形状相同的clipping region,然后使用drawImage()
绘制到此区域来执行此操作;然后在这之上划线(仅)你的路径。
我已经在我的网站上为您创建了这种技术的示例:
http://phrogz.net/tmp/canvas_image_as_background_to_shape.html
这是相关的代码;它按比例缩放图像以填充您指定的宽度:
function clippedBackgroundImage( ctx, img, w, h ){
ctx.save(); // Save the context before clipping
ctx.clip(); // Clip to whatever path is on the context
var imgHeight = w / img.width * img.height;
if (imgHeight < h){
ctx.fillStyle = '#000';
ctx.fill();
}
ctx.drawImage(img,0,0,w,imgHeight);
ctx.restore(); // Get rid of the clipping region
}
如果你想要平铺,不对称拉伸,低透明度着色等,你可以修改它。以下是你如何使用它:
function slashedRectWithBG( ctx, x, y, w, h, slash, img ){
ctx.save(); // Save the context before we muck up its properties
ctx.translate(x,y);
ctx.beginPath();
ctx.moveTo( slash, 0 ); ////////////
ctx.lineTo( w, 0 ); // //
ctx.lineTo( w, h-slash ); // //
ctx.lineTo( w-slash,h ); // //
ctx.lineTo( 0, h ); // //
ctx.lineTo( 0, slash ); ////////////
ctx.closePath();
clippedBackgroundImage( ctx, img, w, h );
ctx.stroke(); // Now draw our path
ctx.restore(); // Put the canvas back how it was before we started
}
请注意,在创建要传递给函数的图像时,必须set its onload
handler before setting the src
:
var img = new Image;
img.onload = function(){
// Now you can pass the `img` object to various functions
};
img.src = "...";