HTML5-Canvas用法示例14（图形添加鼠标单击，拖动交互）

画布是一个非保留的绘图界面，也就是说canvas 可拖动线，它不会记录过去执行的绘图操作，但会保留最终结果（构成图像的彩色像素）.

例如，如果要使Canvas具有交互性，用户可以选择并拖布上的图形. 然后，我们必须记录每个绘制的对象，以便将来灵活修改和重绘它们以实现交互.

1. 单击鼠标以选择图形对象

（1）在下面的示例中，单击“添加圆”按钮以在画布上添加具有随机位置，大小和颜色的圆.

（2）单击“空画布”按钮以清除画布上的所有圆圈.

（3）用鼠标单击任何圆圈，该圆圈中会出现一个黑色边框，表明已被选中.

添加一个圆圈以清除画布

代码说明:

（1）为了保存圆形对象，我们定义了一个名为Circle（）的函数类来创建一个自定义对象. 同时，要使该对象能够维护数据，请使用关键字this创建属性.

（2）drawCircles（）函数用于基于当前的一组圆填充画布. 程序每次刷新画布时，将首先使用clearRect（）方法清除画布上的所有内容. 但是不要小心. 这将导致画布闪烁，即画布上的圆圈全部消失canvas 可拖动线，然后立即重新出现.

由于Canvas针对此问题进行了优化，因此它将在执行所有绘制逻辑后清除或绘制所有内容，以确保最终结果的平滑性.

（3）要使用鼠标选择图像，需要进行碰撞检测. 即，计算鼠标单击的点是否落入特定形状. 对于圆形，只需计算点击点与圆形中心之间的直线距离即可.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>hangge.com</title>
 <style>
	 canvas {
	   cursor: pointer;
	   border: 1px solid black;
	 }
 </style>
 <script>
	// 这个方法用来储存每个圆圈对象
	function Circle(x, y, radius, color) {
	  this.x = x;
	  this.y = y;
	  this.radius = radius;
	  this.color = color;
	  this.isSelected = false;
	}
	// 保存画布上所有的圆圈
	var circles = [];
	var canvas;
	var context;
	window.onload = function() {
	  canvas = document.getElementById("canvas");
	  context = canvas.getContext("2d");
	  canvas.onmousedown = canvasClick;
	};
	function addRandomCircle() {
	  // 为圆圈计算一个随机大小和位置
	  var radius = randomFromTo(10, 60);
	  var x = randomFromTo(0, canvas.width);
	  var y = randomFromTo(0, canvas.height);
	  // 为圆圈计算一个随机颜色
	  var colors = ["green", "blue", "red", "yellow", "magenta", "orange", "brown", "purple", "pink"];
	  var color = colors[randomFromTo(0, 8)];
	  // 创建一个新圆圈
	  var circle = new Circle(x, y, radius, color);
	  // 把它保存在数组中
	  circles.push(circle);
	  // 重新绘制画布
	  drawCircles();
	}
	function clearCanvas() {
	  // 去除所有圆圈
	  circles = [];
	  // 重新绘制画布.
	  drawCircles();
	}
	function drawCircles() {
	  // 清除画布，准备绘制
	  context.clearRect(0, 0, canvas.width, canvas.height);
	  // 遍历所有圆圈
	  for(var i=0; i<circles.length; i++) {
		var circle = circles[i];
		// 绘制圆圈
		context.globalAlpha = 0.85;
		context.beginPath();
		context.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2);
		context.fillStyle = circle.color;
		context.strokeStyle = "black";
		if (circle.isSelected) {
		  context.lineWidth = 5;
		}
		else {
		  context.lineWidth = 1;
		}
		context.fill();
		context.stroke(); 
	  }
	}
	var previousSelectedCircle;
	function canvasClick(e) {
	  // 取得画布上被单击的点
	  var clickX = e.pageX - canvas.offsetLeft;
	  var clickY = e.pageY - canvas.offsetTop;
	  // 查找被单击的圆圈
	  for(var i=circles.length-1; i>=0; i--) {
		var circle = circles[i];
		//使用勾股定理计算这个点与圆心之间的距离
		var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2) 
			+ Math.pow(circle.y - clickY, 2))
		// 判断这个点是否在圆圈中
		if (distanceFromCenter <= circle.radius) {
		  // 清除之前选择的圆圈
		  if (previousSelectedCircle != null) previousSelectedCircle.isSelected = false;
		  previousSelectedCircle = circle;
		  
		  //选择新圆圈
		  circle.isSelected = true;
		  //更新显示
		  drawCircles();
		  //停止搜索
		  return;
		}
	  }
	}
	//在某个范围内生成随机数
	function randomFromTo(from, to) {
	  return Math.floor(Math.random() * (to - from + 1) + from);
	}
 </script>
</head>	
<body>
  <canvas id="canvas" width="400" height="300">
  </canvas>
  <div>
    <button onclick="addRandomCircle()">添加圆圈</button>
    <button onclick="clearCanvas()">清空画布</button>
  </div>
 
</body>
</html>

2. 用鼠标拖动图形对象

以下是一项功能改进，允许用户在画布上拖动圆圈. 只需侦听Canvas的onMouseMove事件，相应地修改圆的坐标，然后调用drawCircle（）函数即可重新绘制画布.

添加一个圆圈以清除画布

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-258946-1.html