在画布中标记两个圆圈之间的相交区域-前端问题

Marking the intersecting area between two circles in Canvas(在画布中标记两个圆圈之间的相交区域)

本文介绍了在画布中标记两个圆圈之间的相交区域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试标记两个圆圈之间的重叠区域(例如在维恩图中).我想办法做到这一点是使用两个相交点绘制两条弧线，然后使用 fill() 填充路径.我知道交点的坐标，但如何将其用作 arc() 函数的输入?

I am trying to mark the overlapping area between two circles (like in a Venn Diagram). I figured the way to do this is by drawing two arcs using the two intersecting points and than fill the path using fill(). I know the coordinates of the intersection points, but how do I use that as an input for the arc() function?

ctx.beginPath();
ctx.arc(circle1.x,circle1.y,circle1.r, ? , ? ,true);
ctx.fill();
ctx.closePath();

推荐答案

可以使用画布的 globalCompositeOperation 绘制两个形状的交集

globalCompositeOperation 允许您控制在画布上显示新旧绘图的哪些部分.

The globalCompositeOperation allows you to control which parts of old and new drawings are shown on the canvas.

您可以在此处查看每种合成模式的示例:http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

You can see examples of each compositing mode here: http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

我们使用其中 2 种合成模式来突出显示您的 2 个圆圈的交集:

We use 2 of these compositing modes to highlight the intersection of your 2 circles:

源头

鉴于左圆已经绘制，source-atop 将仅绘制右圆的相交部分.

Given that the left circle is already draw, source-atop will draw only the intersecting part of the right circle.

    ctx.globalCompositeOperation="source-atop";
    ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false);

目的地

鉴于左侧圆圈已经绘制，destination-over 将在现有的左侧圆圈下绘制右侧圆圈.

Given that the left circle is already draw, destination-over will draw the right circle under the existing left circle.

    ctx.globalCompositeOperation="destination-over";
    ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false);

要吸收的东西很多，所以你可以注释掉所有的绘图代码，然后一次一个操作取消注释，看看每个操作有什么效果.

It’s a lot to take in, so you might comment out all the drawing code and then uncomment it one-opration-at-a-time to see what effect each operation has.

这是代码和小提琴:http://jsfiddle.net/m1erickson/JGSJ5/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.fillStyle="yellow";
    ctx.strokeStyle="black";
    ctx.lineWidth=3;

    var circle1={x:100,y:100,r:50};
    var circle2={x:140,y:100,r:50};


    // draw circle1
    ctx.save();
    ctx.beginPath();
    ctx.arc(circle1.x,circle1.y,circle1.r, 0, 2*Math.PI, false);
    ctx.stroke();
    ctx.fill();

    // composite mode "source-atop" to draw the intersection
    ctx.beginPath();
    ctx.fillStyle="orange";
    ctx.globalCompositeOperation="source-atop";
    ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false);
    ctx.fill();
    ctx.stroke();
    ctx.restore();

    // destination-over to draw fill for circle2 again
    ctx.beginPath();
    ctx.globalCompositeOperation="destination-over";
    ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false);
    ctx.fill();

    // back to normal composite mode (newest drawings on top)
    ctx.globalCompositeOperation="source-over";

    // draw the stroke for circle1 again
    ctx.beginPath();
    ctx.arc(circle1.x,circle1.y,circle1.r, 0, 2*Math.PI, false);
    ctx.stroke();

    // draw the stroke for circle2 again
    ctx.beginPath();
    ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false);
    ctx.stroke();

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

这篇关于在画布中标记两个圆圈之间的相交区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！