Javascript HTML5 Canvas绘制透明圆 [英] Javascript HTML5 Canvas drawing transparent circles
问题描述
我需要一个函数来绘制画布上几个圆圈从mousedown中心= x，y和拖动鼠标到deltaX，deltaY因此创建半径r，为每个圆。圆圈不能有填充（需要它们透明），因此用户可以清楚地看到圆圈截取的位置。我当前的代码绘制圆形WHILE鼠标被拖动，这是预期，但它也LEAVES那些额外的圆圈。我需要在mouseup上只留下圆圈。任何帮助是赞赏。谢谢：）。
I need to have a function to draw several circles on canvas starting with mousedown at center=x,y and dragging mouse to deltaX,deltaY thus creating radius r, for each circle. The circles cannot have a fill (need them transparent) so the user can see clearly where the circles intercept. My current code draws circles WHILE the mouse is dragged, and that's expected, but it also LEAVES those extra circles behind. I need to leave only the circle on mouseup. Any help is appreciated. Thank you :).
<html>
<head>
</head>
<body style="margin:0">
<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
var radius=50;
var nStartX = 0;
var nStartY = 0;
var bIsDrawing = false;
var putPoint = function(e){
nStartX = e.clientX;nStartY = e.clientY;
bIsDrawing = true;
radius = 0;
}
var drawPoint = function(e){
if(!bIsDrawing)
return;
var nDeltaX = nStartX - e.clientX;
var nDeltaY = nStartY - e.clientY;
radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY)
context.beginPath();
context.arc(nStartX, nStartY, radius, 0, Math.PI*2);
context.strokeStyle="#000000";
//context.fillStyle="#FFFFFF";
context.fillStyle = 'rgba(0, 0, 0, 0)';
context.stroke();
context.fill();
}
var stopPoint = function(e){
//context.clip();
//context.clearRect(0, 0, canvas.width, canvas.height);
bIsDrawing = false;
}
canvas.addEventListener('mousedown',putPoint);
canvas.addEventListener('mousemove',drawPoint);
canvas.addEventListener('mouseup',stopPoint);
</script>
</body>
</html>
推荐答案
你需要跟踪你绘制的圆圈（和其他对象） - 一种方法是在mouseup上将它们推入一个数组。
You need to keep track of the circles (and other objects) that you've drawn - one way would be to push them into an array on mouseup. Then each draw should be preceded by a canvas clear and redraw of the saved circles.
var circles = [];
...
清除画布
...
radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY)
context.clearRect(0, 0, canvas.width, canvas.height);
...
绘制已保存的圈子
...
context.fill();
// drawing saved circles
circles.forEach(function(circle){
context.beginPath();
context.arc(circle.nStartX, circle.nStartY, circle.radius, 0, Math.PI*2);
context.strokeStyle="#000000";
context.fillStyle="#FFFFFF";
context.fillStyle = 'rgba(0, 0, 0, 0)';
context.stroke();
context.fill();
})
...
保存已完成的圈子
...
bIsDrawing = false;
// saving completed circles
var nDeltaX = nStartX - e.clientX;
var nDeltaY = nStartY - e.clientY;
radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY);
circles.push({ nStartX: nStartX, nStartY: nStartY, radius: radius });
...
< a href =https://jsfiddle.net/9x77sg2h/ =nofollow> https://jsfiddle.net/9x77sg2h/
这篇关于Javascript HTML5 Canvas绘制透明圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
