角度，在鼠标事件上使用画布绘制多个矩形

角度是一个计算机图形学中的概念，用于描述一个物体或图形相对于某个参考点或参考轴的旋转程度。在鼠标事件上使用画布绘制多个矩形可以通过以下步骤实现：

创建一个画布：使用HTML5的Canvas元素创建一个画布，并设置其宽度和高度。

<canvas id="myCanvas" width="500" height="500"></canvas>

获取画布上下文：使用JavaScript获取画布的上下文，以便后续的绘制操作。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

绘制矩形：使用上下文的fillRect()方法绘制矩形。可以使用鼠标事件（如鼠标点击、鼠标移动等）来触发绘制操作。

canvas.addEventListener("mousedown", function(event) {
  var rectX = event.clientX - canvas.offsetLeft;
  var rectY = event.clientY - canvas.offsetTop;
  var rectWidth = 50;
  var rectHeight = 50;
  
  ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
});

在上述代码中，当鼠标在画布上按下时，会获取鼠标相对于画布左上角的坐标，并以该坐标为矩形的左上角点，绘制一个宽高为50的矩形。

绘制多个矩形：可以使用一个数组来保存多个矩形的坐标和尺寸，然后在鼠标事件中循环绘制这些矩形。

var rectangles = [];

canvas.addEventListener("mousedown", function(event) {
  var rectX = event.clientX - canvas.offsetLeft;
  var rectY = event.clientY - canvas.offsetTop;
  var rectWidth = 50;
  var rectHeight = 50;
  
  rectangles.push({x: rectX, y: rectY, width: rectWidth, height: rectHeight});
  
  drawRectangles();
});

function drawRectangles() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  for (var i = 0; i < rectangles.length; i++) {
    var rect = rectangles[i];
    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
  }
}

在上述代码中，每次鼠标按下时，会将新的矩形坐标和尺寸添加到rectangles数组中，并调用drawRectangles()函数重新绘制所有矩形。

这样，当鼠标在画布上按下时，就会绘制一个新的矩形，并保留之前绘制的所有矩形。

腾讯云相关产品和产品介绍链接地址：