javascript - 使用 Canvas 连接多个圆

Question

我正在尝试编写一个程序，当用户第一次单击时，该程序将在屏幕上绘制一个圆圈，然后每次连续单击时，它将绘制另一个圆圈，并将第一个圆圈连接到新的圆圈直线。除了根据用户点击绘制圆圈之外，我有点陷入困境。

这是我的代码

var app = angular.module('plunker', []);

app.controller('MainController', function($scope) {
  //alert("test");
 $scope.doClick = function(event){

 var x = event.clientX;
 var y = event.clientY;
 var offsetX = event.offsetX;
 var offsetY = event.offsetY;
 //alert(x, y, offsetX, offsetY);

 /// These are the 2 new lines, see you target the canvas element then apply it to getContext
 var canvasElement = document.getElementById("canvas");
 var ctx = canvasElement.getContext("2d");

  //draw a circle
  ctx.beginPath();
  ctx.arc(x, y, 5, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();

};


});

这是 plnk 的链接

http://plnkr.co/edit/rYVLgB14IutNh1F4MN6T?p=preview

感谢任何帮助

Answer 1

你已经把圆圈画得很好了...这是如何制作连接线的!

您可以使用合成来在先前绘制的内容下绘制连接线

特别是ctx.globalCompositeOperation='destination-over'将导致您的新连接线被绘制在之前绘制的圆(和线)的下方。

这里是示例代码和演示:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }

var isDown=false;
var startX,startY;

var radius=10;
var lastX,lastY;

ctx.fillStyle='red';

$("#canvas").mousedown(function(e){handleMouseDown(e);});


function drawCircle(cx,cy){
  if(lastX){
    ctx.globalCompositeOperation='destination-over';
    ctx.beginPath();
    ctx.moveTo(lastX,lastY);
    ctx.lineTo(cx,cy);
    ctx.stroke();
    ctx.globalCompositeOperation='source-over';
  }
  ctx.beginPath();
  ctx.arc(cx,cy,radius,0,Math.PI*2);
  ctx.closePath();
  ctx.fill();
}

function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mx=parseInt(e.clientX-offsetX);
  my=parseInt(e.clientY-offsetY);

  drawCircle(mx,my);

  lastX=mx;
  lastY=my;
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click on the canvas to draw connected circles</h4>
<canvas id="canvas" width=300 height=300></canvas>

[添加了所有新圈子都连接到第一个圈子的示例]

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }

var isDown=false;
var startX,startY;

var radius=10;
var lastX,lastY;

ctx.fillStyle='red';


$("#canvas").mousedown(function(e){handleMouseDown(e);});


function drawCircle(cx,cy){
  if(lastX){
    ctx.globalCompositeOperation='destination-over';
    ctx.beginPath();
    ctx.moveTo(lastX,lastY);
    ctx.lineTo(cx,cy);
    ctx.stroke();
    ctx.globalCompositeOperation='source-over';
  }else{
    lastX=cx;
    lastY=cy;
  }
  ctx.beginPath();
  ctx.arc(cx,cy,radius,0,Math.PI*2);
  ctx.closePath();
  ctx.fill();
}

function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mx=parseInt(e.clientX-offsetX);
  my=parseInt(e.clientY-offsetY);

  drawCircle(mx,my);
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click on the canvas to draw connected circles</h4>
<canvas id="canvas" width=300 height=300></canvas>