canvas绘制四棱锥并运动

最新推荐文章于 2024-09-10 12:40:14 发布

weixin_45640518

最新推荐文章于 2024-09-10 12:40:14 发布

阅读量398

点赞数

文章标签： canvas

本文链接：https://blog.csdn.net/weixin_45640518/article/details/112986774

版权

本文介绍了如何使用HTML5的Canvas API来绘制图形和路径，并通过JavaScript实现图形的上下往返运动。首先，通过添加canvas标签并在JS中获取元素，然后创建2D渲染上下文。接着，利用beginPath(), moveTo()和lineTo()等方法定义路径，设置线条样式并绘制。最后，通过调整指针坐标和判断条件，实现了图形的匀速往返运动。

摘要由CSDN通过智能技术生成

canvas的绘制图形
1.在html文件中添加canvas标签

<canvas id="canvas"></canvas>

2.获取canvas元素
js

let canvas= document.getElementById('canvas')

3.创建content对象

let context = canvas.getContext('2d');

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

Canvas 坐标
canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

坐标实例

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。

Canvas - 路径
在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

在这里插入图片描述

var pointer = {
      y: 40
  };
context.beginPath();
context.moveTo(120, pointer.y);    // 设置路径起点
context.lineTo(0, 90+pointer.y);   // 设置路径终点
context.lineTo(110, 210+pointer.y);
context.lineTo(190, 100+pointer.y);
context.lineTo(120, pointer.y);
context.lineTo(100, 85+pointer.y);
context.lineTo(190, 100+pointer.y);
context.lineTo(110, 210+pointer.y);
context.lineTo(100, 85+pointer.y);
context.lineTo(0, 90+pointer.y);
//context.closePath();    // 关闭路径
context.lineWidth=1;  //宽度  可为小数
context.strokeStyle='green' //线条颜色
context.stroke();

图形绘制基本完成
pointer.y是方便运动所设定
下一步是实现往返运动
参考文章
https://www.softwhy.com/article-8393-1.html
实现上下往返运动所以x不变 y变化
pointer.y初始值40
设置速度speed为定值实现匀速运动
往返条件图形运动到极值时方向改变

  var flag;
  if (pointer.y ==  200) {
        flag = 1 ;    
    }else if(pointer.y == 40){
        flag = 0;
    }
    if(flag == 1){
      pointer.y -= speed;
    }else{
      pointer.y += speed;
    }

实现先从上往下运动若起始值为200即可实现先上后下
同理如果欲实现左右运动 x变化，y不变
其他运动轨迹可根据数学公式

完整代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>canvas</title>
<style>
html,body,canvas{
  background:#fbfbfb;
}
#canvas{
  margin-left:20px;
}
</style>
<script>
setTimeout(() => {
  let canvas =  document.getElementsByTagName('canvas')[0];
  let context = canvas.getContext('2d');
  canvas.width = 300;
  canvas.height = 400;
  var pointer = {
      y: 40
  };
  let render =  () => {
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.beginPath();
    context.moveTo(120, pointer.y);    // 设置路径起点
    context.lineTo(0, 90+pointer.y);   // 设置路径终点
    context.lineTo(110, 210+pointer.y);
    context.lineTo(190, 100+pointer.y);
    context.lineTo(120, pointer.y);
    context.lineTo(100, 85+pointer.y);
    context.lineTo(190, 100+pointer.y);
    context.lineTo(110, 210+pointer.y);
    context.lineTo(100, 85+pointer.y);
    context.lineTo(0, 90+pointer.y);
        //context.closePath();    // 关闭路径
    context.lineWidth=1;
    context.strokeStyle='green'
    context.stroke();
  };
  var speed = 2;
  var flag;
  (run = () => {  
    if (pointer.y ==  200) {
        flag = 1 ;    
    }else if(pointer.y == 40){
        flag = 0;
    }
    if(flag == 1){
      pointer.y -= speed;
    }else{
      pointer.y += speed;
    }
    render(); 
    requestAnimationFrame(run)
  })();
}, 1500);

</script>
</head>
<body>
<canvas id="canvas"></canvas>
<canvas id="canvas_right"></canvas>
</body>
</html>