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