Javascript 如何在html5 2d画布绘图中组合多个剪辑区域_Javascript_Html5 Canvas_2d_Clipping_Html2canvas

Javascript 如何在html5 2d画布绘图中组合多个剪辑区域

javascript html5-canvas

Javascript 如何在html5 2d画布绘图中组合多个剪辑区域,javascript,html5-canvas,2d,clipping,html2canvas,Javascript,Html5 Canvas,2d,Clipping,Html2canvas,我想画一个有多个剪辑区域的区域以下是屏幕截图：我写了一个绘图示例：总面积应为四个绿色区域+中间的白色矩形从基础教程中，我知道绘制裁剪平面就像绘制其他东西一样创建剪裁区域 context.clip（）但是，创建一个裁剪区域，我们有多个区域，如何组合，有什么建议吗？谢谢下面是一些代码： ctx.save(); // save the context so we don't mess up others ctx.beginPath(); ctx.fillSty

我想画一个有多个剪辑区域的区域

以下是屏幕截图：

我写了一个绘图示例：

总面积应为四个

绿色

区域+中间的白色矩形

从基础教程中，我知道绘制裁剪平面就像绘制其他东西一样

创建剪裁区域

context.clip（）

但是，创建一个裁剪区域，我们有多个区域，如何组合，有什么建议吗？谢谢

下面是一些代码：

  ctx.save();   // save the context so we don't mess up others
    ctx.beginPath();
    ctx.fillStyle = "#ffffff";
    ctx.rect(this.x, this.y, this.w, this.h);
    ctx.fill();
    ctx.restore();  // restore context to what it was on entry
    ctx.fillStyle = "#00ff00";//Color for four surrounded area.
    ctx.save(); // save the context so we don't mess up others
    ctx.beginPath();
    r = Math.sqrt((this.h/2)*(this.h/2) + 16 *this.w * this.w);
    thea = Math.atan(this.h/this.w/8);
    ctx.arc(this.x + this.w*4, this.y + this.h/2, r , Math.PI - thea,  Math.PI+thea, false);
    ctx.closePath();
    ctx.fill();
    //ctx.clip();
    ctx.restore();  // restore context to what it was on entry

    ctx.save(); // save the context so we don't mess up others
    ctx.beginPath();
    r = Math.sqrt((this.h/2)*(this.h/2) + 16 *this.w * this.w);
    thea = Math.atan(this.h/this.w/8);
    ctx.arc(this.x- this.w*3, this.y + this.h/2, r , -thea,  thea, false);
    ctx.closePath();
    ctx.fill();
    //ctx.clip();
    ctx.restore();  // restore context to what it was on entry

    ctx.save(); // save the context so we don't mess up others
    ctx.beginPath();
    r = Math.sqrt((this.w/2)*(this.w/2) + 16 * this.h * this.h);
    thea = Math.atan(this.w/this.h/8);
    ctx.arc(this.x + this.w/2, this.y + 4 * this.h, r , Math.PI*3/2-thea,  Math.PI*3/2 + thea, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();  // restore context to what it was on entry
    ctx.save(); // save the context so we don't mess up others
    ctx.beginPath();

    r = Math.sqrt((this.w/2)*(this.w/2) + 16*this.h*this.h);
    thea = Math.atan(this.w/this.h/8);
    ctx.arc(this.x + this.w/2, this.y-3*this.h , r , Math.PI/2-thea,  Math.PI/2 + thea, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();  // restore context to what it was on entry
    ctx.save();

剪裁路径实际上是一条路径

这意味着，如果在一条路径中绘制所有4条闭合圆弧，则可以使用该多形状路径进行剪裁

您可以通过在弧前执行1

beginPath

命令，而不是在每个弧前执行

beginPath

命令来组合路径

结果是一条如下所示的路径，您可以将其用作剪裁路径：

例如，这就是如何使用剪裁路径来包含对角线条纹的图像：

下面是示例代码和演示：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/rainbowDiagonal.jpg";
函数start（）{
ctx.beginPath（）；
ctx.fillStyle=“#000”；
ctx.rect（0,0，canvas.width，canvas.height）；
ctx.fill（）；
draw（）；
}
函数绘图（）{
var x=50；
变量y=50；
var w=200；
var h=200；
ctx.save（）；
ctx.fillStyle=“#00ff00”//四个包围区域的颜色。
ctx.beginPath（）；
r=数学平方比（（h/2）*（h/2）+16*w*w）；
thea=数学公式（h/w/8）；
弧（x+w*4，y+h/2，r，Math.PI-thea，Math.PI+thea，false）；
ctx.closePath（）；
r=数学平方比（（h/2）*（h/2）+16*w*w）；
thea=数学公式（h/w/8）；
弧（x-w*3，y+h/2，r，-thea，thea，false）；
ctx.closePath（）；
r=数学平方比（（w/2）*（w/2）+16*h*h）；
thea=数学公式（w/h/8）；
ctx.arc（x+w/2，y+4*h，r，数学PI*3/2-thea，数学PI*3/2+thea，false）；
ctx.closePath（）；
r=数学平方比（（w/2）*（w/2）+16*h*h）；
thea=数学公式（w/h/8）；
ctx.arc（x+w/2，y-3*h，r，Math.PI/2-thea，Math.PI/2+thea，false）；
ctx.closePath（）；
ctx.clip（）；
ctx.drawImage（img，0,0）；
ctx.restore（）；
}
}); // end$（函数（）{}）；

谢谢，创建一个剪辑区域是否仅与一条路径合并？好的，我想我可以使用多路径组合。再次感谢。是的，剪辑路径始终只是一条路径。但是，您可以在单个路径中根据需要组合任意多个图形命令。；-）

<!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");

    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/multple/rainbowDiagonal.jpg";
    function start(){

        ctx.beginPath();
        ctx.fillStyle = "#000";
        ctx.rect(0,0,canvas.width,canvas.height);
        ctx.fill();

        draw();
    }

    function draw(){
        var x=50;
        var y=50;
        var w=200;
        var h=200;

        ctx.save();

        ctx.fillStyle = "#00ff00";//Color for four surrounded area.

        ctx.beginPath();

        r = Math.sqrt((h/2)*(h/2) + 16 *w * w);
        thea = Math.atan(h/w/8);
        ctx.arc(x + w*4, y + h/2, r , Math.PI - thea,  Math.PI+thea, false);
        ctx.closePath();

        r = Math.sqrt((h/2)*(h/2) + 16 *w * w);
        thea = Math.atan(h/w/8);
        ctx.arc(x- w*3, y + h/2, r , -thea,  thea, false);
        ctx.closePath();

        r = Math.sqrt((w/2)*(w/2) + 16 * h * h);
        thea = Math.atan(w/h/8);
        ctx.arc(x + w/2, y + 4 * h, r , Math.PI*3/2-thea,  Math.PI*3/2 + thea, false);
        ctx.closePath();

        r = Math.sqrt((w/2)*(w/2) + 16*h*h);
        thea = Math.atan(w/h/8);
        ctx.arc(x + w/2, y-3*h , r , Math.PI/2-thea,  Math.PI/2 + thea, false);
        ctx.closePath();

        ctx.clip();

        ctx.drawImage(img,0,0);

        ctx.restore();

    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>