[英]Changing Stroke color in HTML 5 Canvas
我正在尝试绘制一个圆形,一种时钟,我从点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>
你的角度有点麻烦。 你基本上每次都会将弧从0重新绘制到endAngle
。 因此,当endAngle大于6时,你将从0-6重绘为白色圆弧。
简单的解决方法是在重置i
时设置endAngle = 0.01
。 您可能还希望在每次迭代时将startAngle
更新为最后一个弧的结束,这样它就不会一直自行绘制。
希望这可以帮助!
使用Shaded的答案,您可以执行以下操作:
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;
因为白色会与它背后的黑色反锯齿,如果线宽相同,你会在边缘处获得锯齿。 增加线宽可以缓解这个问题。
编辑:根据Shaded的评论更新以删除过多的过度绘画。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.