[英]HTML5 canvas draw image with inline border
I have a canvas where I draw images with:我有一个画布,用于绘制图像:
drawImage(...);
How can I add an inline stroke to that image?如何向该图像添加内嵌笔划?
As you're not showing what you actually use as arguments for the drawImage() method the answer will be general for two scenarios:由于您没有显示实际用作 drawImage() 方法参数的内容,因此对于两种情况,答案是通用的:
If the image cover the complete canvas you can use something like this:如果图像覆盖整个画布,您可以使用以下内容:
ctx.beginPath();
ctx.strokeStyle = '#f00'; // some color/style
ctx.lineWidth = 2; // thickness
ctx.strokeRect(0, 0, ctx.canvas.width, ctx.canvas.height);
after drawing the image.绘制图像后。
If you use different size and position for the image just use the same values for the strokeRect()
method:如果您对图像使用不同的大小和位置,只需为
strokeRect()
方法使用相同的值:
ctx.drawImage(img, 100, 100, 250, 100);
ctx.strokeRect(100, 100, 250, 100);
or或者
ctx.drawImage(img, x, y, w, h, 100, 100, 250, 100);
ctx.strokeRect(100, 100, 250, 100);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.