图像上的圆形边缘
说我创建了一个多边形形状的图像,方法是在HTML5画布中创建一个形状,然后用图像填充它,如下图所示:图像上的圆形边缘
现在我要圆这个六边形的角落。
有一个lineJoin = "round"
财产可用,但这似乎并没有工作(我相信,因为形状是充满的,没有外线轮)。
有没有人有任何想法如何用HTML5画布或任何其他方式做到这一点?
下面是用于创建图像的代码:
var ctx = document.getElementById('myCanvas').getContext('2d');
var a = ctx.canvas.width, r = a/5;
var side = Math.sqrt((4/3) * r * r);
// Draw your image onto the canvas (here I'll just fill the
// surface with red
var img = new Image();
img.src = "https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg";
img.onload = function() {
var pattern = ctx.createPattern(img, "no-repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, a, a);
// Switch the blending mode
ctx.globalCompositeOperation = 'destination-in';
// Draw the hexagon shape to mask the image
ctx.beginPath();
ctx.moveTo(0, side/2);
ctx.lineTo(0, 3*side/2);
ctx.lineTo(r, 2*side);
ctx.lineTo(2*r, 3*side/2);
ctx.lineTo(2*r, side/2);
ctx.lineTo(r, 0);
ctx.closePath();
ctx.fill();
};
<canvas width="1000" height="1000" id="myCanvas"></canvas>
只需更改您绘制的订单,然后将globalCompositeOperation
更改为'source-in'
。
我做了一些调整,因为一些在你的代码的边角都拿到截掉,但没有调整图像的位置(我希望这是很容易做到)
预览
你需要的方式来调整图像位置就像我说的
片段
var ctx = document.getElementById('myCanvas').getContext('2d');
var a = ctx.canvas.width, r = a/5;
var side = Math.sqrt((4/3) * r * r) - 20;
// Draw your image onto the canvas (here I'll just fill the
// surface with red
var img = new Image();
img.src = "https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg";
img.onload = function() {
ctx.lineJoin = "round";
ctx.lineWidth = 50;
// Draw the hexagon shape to mask the image
ctx.beginPath();
ctx.moveTo(50, 50 + side/2);
ctx.lineTo(50, 50 + 3*side/2);
ctx.lineTo(50 + r, 50 + 2*side);
ctx.lineTo(50 + 2*r, 50 + 3*side/2);
ctx.lineTo(50 + 2*r, 50 + side/2);
ctx.lineTo(50 + r, 50);
ctx.closePath();
ctx.stroke();
ctx.fill();
// Switch the blending mode
ctx.globalCompositeOperation = 'source-in';
var pattern = ctx.createPattern(img, "no-repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, a, a);
};
<canvas width="1000" height="1000" id="myCanvas"></canvas>
伟大的解决方案,谢谢! –
不用担心!我忘了提及我还添加了一个'ctx.stroke()' – potatopeelings
有这样做的没有自动的方式。画布API是相当低级的,所以它不知道你画了一个形状,并且想要检测所有边缘在哪里。你可以做什么,但这会有点麻烦,就是使用bezierCurveTo
。此方法需要大小参数并可以创建曲线。结合你的线条,你可以创建圆角。
你也可以在任何角落的社交圈,与arc
方法。
画你的线条,创造六角短一点,让他们结束每个角落点之前的一点,然后绘制[圆弧](HTTPS ://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc)创建圆角。 (可能需要进行一些计算才能获得正确的位置和角度。)//也许使用CSS剪辑路径或SVG掩码可以使这更容易。 https://css-tricks.com/clipping-masking-css/ – CBroe
只是好奇。 :-)为什么使用模式而不是'context.drawImage'? – markE
@markE我刚开始使用的第一件事情是,首先完成工作,但您可能正确使用'''context.drawImage'''; http://jsperf.com/drawimage-vs-canvaspattern/16。不知道我对画布有足够的了解,以作出明智的决定。 –