Fatal编程技术网
  • javascript/
  • Javascript 在HTML5画布中更改笔划颜色

Javascript 在HTML5画布中更改笔划颜色

javascript html canvas graphics

Javascript 在HTML5画布中更改笔划颜色,javascript,html,canvas,graphics,Javascript,Html,Canvas,Graphics,我试着画一个圆，有点像时钟，我从点p1开始，使用画布2d上下文画一个黑色的弧，当我到达点p1（完整的圆漫游）时，我将颜色改为白色，然后继续绘制，这应该会给它一种效果，就像黑色的弧被擦除一样，但这并不像预期的那样工作，因为当我改变上下文的颜色时，一切都会改变 如何在不改变整个场景颜色的情况下，将第一个圆保持为一种颜色，并在其顶部绘制另一个不同颜色的圆 这是我的尝试 <!DOCTYPE html /> <html> <head> <title><

我试着画一个圆，有点像时钟，我从点p1开始，使用画布2d上下文画一个黑色的弧，当我到达点p1（完整的圆漫游）时，我将颜色改为白色，然后继续绘制，这应该会给它一种效果，就像黑色的弧被擦除一样，但这并不像预期的那样工作，因为当我改变上下文的颜色时，一切都会改变

如何在不改变整个场景颜色的情况下，将第一个圆保持为一种颜色，并在其顶部绘制另一个不同颜色的圆

这是我的尝试

<!DOCTYPE html />
<html>
<head>
<title></title>
<script type="text/javascript">
        var i = 0.01;
        var Color = "Black";
        var x = 75;                // x coordinate
        var y = 75;                // y coordinate
        var radius = 20;                    // Arc radius
        var startAngle = 0;                     // Starting point on circle
        var anticlockwise = false; // clockwise or anticlockwise

        function draw() {
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

                ctx.beginPath();
                var endAngle = i; // End point on circleMath.PI + (Math.PI * 5) /

                if (Math.floor(endAngle) >= 6) {
                    i = 0.01;
                    if (Color == "Black") {
                        Color = "White";
                    } else {
                        Color = "Black";
                    }
                }

                ctx.strokeStyle = Color;
                ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
                ctx.stroke();

                i = i + 0.05;
                //document.getElementById('display').innerHTML = Math.floor(endAngle) + " " + Color;
    }

</script>
</head>
<body onload="window.setInterval(function(){draw()},100);">
<canvas id="canvas" width="150" height="150"></canvas>
<span id="display"></span>
</body>
</html>


var i=0.01；
var Color=“黑色”；
变量x=75；//x坐标
变量y=75；//y坐标
变量半径=20；//弧半径
var startAngle=0；//圆上的起点
var逆时针=假；//顺时针还是逆时针
函数绘图（）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
ctx.beginPath（）；
var endAngle=i；//circleMath.PI+（Math.PI*5）上的端点/
如果（数学楼层（端角）>=6）{
i=0.01；
如果（颜色=“黑色”）{
Color=“白色”；
}否则{
Color=“黑色”；
}
}
ctx.strokeStyle=颜色；
弧（x，y，半径，星形，端角，逆时针）；
ctx.stroke（）；
i=i+0.05；
//document.getElementById（'display'）.innerHTML=Math.floor（endAngle）+''Color；
}
你的角度有点问题。实际上，每次都是将圆弧从0重绘到
端点角度。因此，在结束时，当endAngle大于6时，将使用白色圆弧从0-6重新绘制

简单的解决方法是，当您重置
i
时，只需设置
endAngle=0.01
。您可能还希望在每次迭代时更新
startAngle
，使其成为最后一个弧的终点，这样它就不会一直在画自己


希望这有帮助
 使用Shadded的答案，您可以执行以下操作：


if (Math.floor(endAngle) > 6.0) {
    i = 0.01;
    endAngle = i;
    startAngle = 0;
    if (Color == "Black") {
        Color = "White";
        ctx.lineWidth = 4;
    } else {
        Color = "Black";
        ctx.lineWidth = 1;
    }
}

ctx.strokeStyle = Color;
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
ctx.stroke();

startAngle = endAngle - 0.1;


因为白色后面会有黑色，所以如果线宽相同，边缘会出现锯齿。增加线宽可以缓解此问题


编辑：根据Shade的评论进行了更新，以消除过度的过度绘画。
我利用@Shade的更新startAngle的建议对此进行了调整。它解决了您的问题，但也提出了一些其他问题，即：逆时针方向不适用于此（我们需要交换endAngle和startAngle），而且看起来较浅的颜色并没有覆盖较深的颜色，而是与之混合。另外，我将您的条件从
Math.Floor=6
更改为更精确的
，如果endAngle>=2*Math.PI
，以避免绘图中出现间隙。谢谢你们。这里有一个更新，但是真的斯科特，它的颜色混合：）仅供参考，这不是一个混合的问题，而是一个抗锯齿的问题。但奇怪的是，它没有完全覆盖。正确..当我发现这一点时，我会发布一个更新，不确定我是否需要现在接受答案。我尝试了这个，问题似乎仍然存在，黑线仍然可见：\odd，在这里似乎可以正常工作。我用的是Chrome。嗯。。。真奇怪，我也在Chrome上，你的小提琴也适合我。。。我似乎看不出有什么不同！啊，这是因为你仍然将startAngle设置为0。我将其更新为末端角度，以防止不必要的过度绘制，但我想这在这种情况下会有所帮助。这是有意义的，我没有想到：\
startAngle=endAngle-0.1也很有效，因为你的画力刚好可以覆盖它。