Javascript HTML5 Canvas绘制透明圆圈

Question

我需要有一个函数在画布上绘制几个圆圈，从mousedown at center = x，y开始，并将鼠标拖动到deltaX，deltaY，从而为每个圆圈创建半径r。 圆圈不能有填充（需要它们透明），以便用户可以清楚地看到圆圈截取的位置。 我的当前代码在拖动鼠标时绘制圆圈，这是预期的，但它也留下了那些额外的圆圈。 我只需要在mouseup上留下圆圈。 任何帮助表示赞赏。 谢谢：）。

 <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>

Answer 1

您需要跟踪您绘制的圆圈（以及其他对象） - 一种方法是将它们推送到mouseup上的数组中。 然后每个绘图前面都应该有一个画布清晰并重绘已保存的圆圈。

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 });
...

小提琴 - https://jsfiddle.net/9x77sg2h/

Answer 2

在我的评论的基础上，这是一个跟踪所有圈子的例子。 它与potatopeelings答案基本相同，但我想显示requestAnimationFrame的用法，以独立于用户行为重绘。

 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var circles = []; var currentCircle = null; requestAnimationFrame(function draw() { drawCircles(); requestAnimationFrame(draw); }); function putPoint(e){ currentCircle = { center: { x: e.clientX - this.offsetLeft + window.scrollX, y: e.clientY - this.offsetTop + window.scrollY } }; } function drawPoint(e) { if (null !== currentCircle) { currentCircle.radius = Math.sqrt( Math.pow(currentCircle.center.x - e.clientX + this.offsetLeft - window.scrollX, 2) + Math.pow(currentCircle.center.y - e.clientY + this.offsetTop - window.scrollY, 2) ); } } function drawCircles() { // clear canvas context.clearRect(0, 0, canvas.width, canvas.height); // previous circles.forEach(drawCircle); // current if (null !== currentCircle) { drawCircle(currentCircle); } } function drawCircle(circle) { context.save(); context.beginPath(); context.arc(circle.center.x, circle.center.y, circle.radius, 0, 2 * Math.PI); context.strokeStyle= '#000000'; context.fillStyle = 'rgba(0, 0, 0, 0)'; context.stroke(); context.fill(); context.restore(); } function stopPoint() { if (null !== currentCircle) { circles.push(currentCircle); currentCircle = null; } } canvas.addEventListener('mousedown', putPoint, false); canvas.addEventListener('mousemove', drawPoint, false); canvas.addEventListener('mouseup', stopPoint, false);

 <canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas>

Javascript HTML5 Canvas绘制透明圆圈

问题描述

2 个解决方案

解决方案1
4 2016-04-14 12:32:44

解决方案2
2 2016-04-14 12:45:53

Javascript HTML5 Canvas绘制透明圆圈

问题描述

2 个解决方案

解决方案1 4 2016-04-14 12:32:44

解决方案2 2 2016-04-14 12:45:53

解决方案1
4 2016-04-14 12:32:44

解决方案2
2 2016-04-14 12:45:53