Canvas Orthogonal Coordinate System Rotation--Monitor Wheel

canvas

Simple learning canvas

<canvas id=“myCanvas” width=200 height=100 ></canvas>
id is the ID of the canvas element;

height, width specifies the size of the canvas

直线：

The beginPath() method indicates the path to start drawing: ctx.beginPath();
The moveTo() method moves the coordinates to the starting point of the line: ctx.moveTo(x,y);
The lineTo() method draws a line: ctx.lineTo(x,y) );
stroke() method, drawing the boundary outline of graphics: ctx.stroke();
closePath() method, indicating the closed drawing path: ctx.closePath()
    var mycanvas=document.getElementById("canvas");
    var ctx=mycanvas.getContext("2d");
	ctx.beginPath();
	ctx.moveTo(100,100);//移动到绘制点
	ctx.lineTo(200,200);
	ctx.strokeStyle="#000000"; //指定描边颜色
	ctx.stroke();
三角形：
	var mycanvas=document.getElementById("canvas");
    var ctx=mycanvas.getContext("2d");
	ctx.beginPath();
	ctx.moveTo(100,200);
	ctx.lineTo(400,200);
	ctx.lineTo(250,400);
	ctx.closePath();//闭合绘图
	ctx.strokeStyle="#000000";
	ctx.stroke();

矩形：

Draw a rectangle: rect(x,y,width,height);

Draw a rectangular border: strokeRect(x, y, width, height);

Draw a filled rectangle: fillRect(x, y, width, height);

Erase the specified rectangular area: clearRect(x, y, width, height);
	var mycanvas=document.getElementById("canvas");
	var ctx=mycanvas.getContext("2d");
 
	//rect()函数调用
	ctx.beginPath();
	ctx.rect(20,20,100,50);
	ctx.stroke();

圆形：arc(centerx,centery,radius,startAngle,endAngle,antiClockwise);

centerx, centery arc center point coordinates

Radius radius

startAngle start radian

endAngle end arc

antiClockwise Whether to draw in a counterclockwise direction, is an optional parameter, the default is false (that is, draw in a clockwise direction)
radian = angle * ( Math.PI / 180 )
	var mycanvas=document.getElementById("canvas");
	var ctx=mycanvas.getContext("2d");
	//arc()函数调用
	ctx.beginPath();
	ctx.arc(100,150,70,0,90*Math.PI/180,true);
	ctx.stroke();

function realization

<!DOCTYPE html>
<html>

<head>
  <title>Canvas 监听鼠标滚动开启旋转</title>
  <style>
    canvas {
    
    
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <canvas id="myCanvas" width="400" height="200"></canvas>

  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var isRotating = false; // 是否正在进行旋转
    var isEnter = false; // 鼠标按下允许旋转
    var rotationDirection = 0; // 旋转方向：-1表示逆时针，1表示顺时针
    var rotationAngle = 0; // 旋转角度

    // 绘制y轴
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(100, 150);
    ctx.stroke();

    // 绘制x轴
    ctx.beginPath();
    ctx.moveTo(100, 150);
    ctx.lineTo(150, 150);
    ctx.stroke();

    // 鼠标按下事件监听器
    canvas.addEventListener("mousedown", function (event) {
    
    
      alert('开启旋转功能')
      isEnter = true;
    });

    // 鼠标移动超出画布移除事件监听器
    canvas.addEventListener("mousemove", function (event) {
    
    
      if (isEnter) {
    
    
        let content = canvas.getBoundingClientRect()
        let x = event.clientX
        let y = event.clientY
        if (x >= content.right - 10 || x <= content.left + 10 || y >= content.bottom - 10 || y <= content.top + 10) {
    
    
          isEnter = false
          alert('关闭旋转功能')
        };
      }
    });

    // 鼠标滚动事件监听器
    canvas.addEventListener("wheel", function (event) {
    
    
      event.preventDefault(); // 阻止滚动页面
      if (isEnter) {
    
    
        isRotating = true;
        rotationDirection = event.deltaY > 0 ? -1 : 1; // deltaY > 0 表示向下滚动，逆时针旋转；deltaY < 0 表示向上滚动，顺时针旋转
      }
    });

    // 鼠标滚动停止事件监听器
    var timeoutId;
    canvas.addEventListener("wheel", function () {
    
    
      clearTimeout(timeoutId);
      timeoutId = setTimeout(function () {
    
    
        isRotating = false;
      }, 100); // 停止滚动后100毫秒内不再进行旋转
    });

    // 动画循环函数
    function animate() {
    
    
      if (isRotating) {
    
    
        rotationAngle += rotationDirection * 1; // 每次增加/减少旋转角度
        rotateLine(rotationAngle);
      }

      requestAnimationFrame(animate);
    }

    function rotateLine(angle) {
    
    
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制原始直线
      // ctx.beginPath();
      // ctx.moveTo(50, 100); // 起点
      // ctx.lineTo(350, 100); // 终点
      // ctx.stroke();

      // 保存当前画布状态
      ctx.save();

      // 平移画布到直线中心点
      var centerX = 100;
      var centerY = 150;
      ctx.translate(centerX, centerY);

      // 旋转画布
      ctx.rotate((angle * Math.PI) / 180);

      // 绘制y轴
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(0, -50);
      ctx.stroke();

      // 绘制x轴
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(50, 0);
      ctx.stroke();

      // 恢复画布状态
      ctx.restore();
    }

    animate(); // 启动动画循环
  </script>
</body>

</html>

Effect

Canvas Orthogonal Coordinate Rotation

Canvas Orthogonal Coordinate System Rotation--Monitor Wheel

canvas

Simple learning canvas

function realization

Effect

Guess you like