javascript画布不完美剪裁

Posted 2023-03-14

【中文标题】javascript画布不完美剪裁

【英文标题】：javascript canvas imperfect clipping

【发布时间】：2013-09-15 14:49:03

【问题描述】：

我正在尝试使用剪切路径的逆时针方法绘制“环形楔形”。

var cav=document.getElementById("cav");
var ct=cav.getContext("2d");

function drawWedge(r,s,e)
    ct.moveTo(250,250);
    ct.arc(250,250,r,e,s,true);
    ct.moveTo(250,250);
    ct.arc(250,250,r*0.6,s,e,false);

document.onmousemove=function(e)
ct.fillStyle="#ff0000";

    drawWedge(50,Math.PI/5*3,Math.PI/9*7);
    ct.fill();

你可以在这里看到一个小提琴：

http://jsfiddle.net/u8vjc/2/

我正在使用 Chrome。如果你仔细看，你会发现即使我对两条弧线使用相同的角度，它也不会干净利落。我做错了吗？

【问题讨论】：

几乎看起来像有边框或描边。有没有可以摆弄的边框类型属性？

好像不像，看这个：jsfiddle.net/u8vjc/5所以当你移动鼠标的时候，不完美的剪裁会随着时间的推移而起球

可能是舍入错误。

@XunYang 请看我的回答 - 解决方案很简单。

【参考方案1】：

要画一个楔子，你只需要画两条弧线——两条弧线之间的线会自动画进去：

function drawWedge(r, s, e)
    ct.beginPath();
    ct.arc(250, 250, r, e, s, true);
    ct.arc(250, 250, r * 0.6, s, e, false);
    ct.closePath();

您应该显式调用 beginPath 并且必须调用 closePath 以使连接第二条弧线末端的最后一条线回到第一条弧线的起点.

见http://jsfiddle.net/alnitak/tEY6Z/

【讨论】：

谢谢！刚刚意识到我根本不需要使用剪裁......无论如何都不可能使两个基于浮点的形状完全匹配