我可以在彼此的顶部绘制两个形状并具有组合的笔划/轮廓吗？

Question

到目前为止我有这个： http ： //jsfiddle.net/gautamadude/MQuxC/1/

但显然中风不正确，应该是不规则形状而不是交叉。

是否有可能通过一些globalCompositionOperator体操或其他方式来实现这一点，或者我必须“一步一步”地绘制它而不是在彼此之上绘制一个圆圈和一个矩形？

$(document).ready(function() {
var d_canvas = document.getElementById('canvas');
var context = d_canvas.getContext('2d');
context.beginPath();

var circle_x = 150;
var circle_y = 150;
var radius = 50;
var corners = 10;
var width = (radius*2)/1.1
var height = 50;
var x = circle_x - width/2;
var y = circle_y - 70;

context.moveTo(x + corners, y);
context.lineTo(x + width - corners, y);
context.quadraticCurveTo(x + width, y, x + width, y + corners);
context.lineTo(x + width, y + height - corners);
context.quadraticCurveTo(x + width, y + height, x + width - corners, y + height);
context.lineTo(x + corners, y + height);
context.quadraticCurveTo(x, y + height, x, y + height - corners);
context.lineTo(x, y + corners);
context.quadraticCurveTo(x, y, x + corners, y);

context.arc(circle_x, circle_y, radius, 0, 2*Math.PI);

context.fillStyle = "#000000";
context.fill();
context.strokeStyle = "red";
context.stroke();
context.endPath();
});

Answer 1

您可以通过剪切获得所需的效果：
- 填充和描边圆角矩形
- 填补下圈
- 然后，抚摸圆圈的右边部分：
- 首先剪辑整个画布
- 然后剪掉上方的直肠
- 现在抚摸圆圈。

使用lineWidth为0执行此操作，因为您要精确定义rect。

现在你可以绘制，它将绘制到任何地方，但在矩形。

我将上部矩形近似为常规矩形，在这种情况下可以：

http://jsfiddle.net/gamealchemist/MQuxC/3/

$(document).ready(function () {
    var d_canvas = document.getElementById('canvas');
    var context = d_canvas.getContext('2d');

    context.lineWidth = 2;
    context.strokeStyle = "red";

    context.beginPath();
    var circle_x = 150;
    var circle_y = 150;
    var radius = 50;
    var corners = 10;
    var width = (radius * 2) / 1.1
    var height = 50;
    var x = circle_x - width / 2;
    var y = circle_y - 70;
    context.moveTo(x + corners, y);
    context.lineTo(x + width - corners, y);
    context.quadraticCurveTo(x + width, y, x + width, y + corners);
    context.lineTo(x + width, y + height - corners);
    context.quadraticCurveTo(x + width, y + height, x + width - corners, y + height);
    context.lineTo(x + corners, y + height);
    context.quadraticCurveTo(x, y + height, x, y + height - corners);
    context.lineTo(x, y + corners);
    context.quadraticCurveTo(x, y, x + corners, y);
    context.fillStyle = "#000000";
    context.fill();
    context.stroke();

    context.beginPath();
    context.arc(circle_x, circle_y, radius, 0, 2 * Math.PI);
    context.fillStyle = "#000000";
    context.fill();

    context.save();
    // clip the whole canvas...
    clipCanvas();
    // then draw a hole with the upper rect
    context.moveTo(x, y);
    context.lineTo(x, y + height);
    context.lineTo(x + width, y + height);
    context.lineTo(x + width, y);
    context.lineTo(x, y);
    context.clip();
    // stroke the circle = everywhere except in the rect
    context.beginPath();
    context.lineWidth = 2;
    context.arc(circle_x, circle_y, radius, 0, 2 * Math.PI);
    context.stroke();
    context.restore();

    function clipCanvas() {
        context.beginPath();
        context.lineWidth = 0;
        context.moveTo(0, 0);
        context.lineTo(context.canvas.width, 0); // width/h should be cached if performance matters.
        context.lineTo(context.canvas.width, context.canvas.height);
        context.lineTo(0, context.canvas.height);
        context.lineTo(0, 0);
        context.clip();
    }

});

Answer 2

您可以使用合成来勾勒出组合形状

演示： http ： //jsfiddle.net/m1erickson/EucUZ/

如果你想同时描边和填充你的rect + arc，只需在stroke（）之后执行fill（）。

drawYourPath();
ctx.stroke();
ctx.fill();

如果只想要大纲描边，可以使用合成：

drawYourPath();
ctx.stroke();
ctx.globalCompositeOperation="destination-out";
ctx.fill();

此代码可以稍微增强

• 保存/恢复上下文，这样我们就不会无意中打开合成。
• 合并后的lineWidth加倍将删除笔画宽度的一半

修订后的代码：

ctx.save();
drawYourPath();
ctx.lineWidth*=2;
ctx.stroke();
ctx.globalCompositeOperation="destination-out";
ctx.fill();
ctx.restore();