canvas繪製四稜錐並運動

阿新 • • 發佈：2021-01-23

技術標籤：canvas

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>