Question

我对使用javascript绘制canvas元素的个人项目有一些疑问。是否可以为路径创建变量？我是否用点表示法访问该变量？如何在一定程度上旋转路径？

Answer 1

您在Html Canvas上绘制的所有路径都不会被“记住”，因此一旦在画布上绘制路径就无法旋转路径。

相反，传统编码的画布动画的工作方式如下：

通过将其属性放在对象中来定义形状
使用该对象作为模板在画布上绘制形状

然后改变路径的位置/旋转：

清除画布
更改路径位置的定义＆amp;转动。
使用更改的对象作为模板在画布上重绘形状。

这是示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


var angle1Degree=Math.PI/180;

// define a shape by putting its properties in an object
var shape1={
  points:[{x:0,y:0},{x:50,y:0},{x:100,y:50},{x:0,y:50}],
  fillcolor:'skyblue',
  strokecolor:'lightgray',
  strokewidth:3,
  x:100,
  y:100,
  rotation:0,
}

animate();

function drawAll(){
  ctx.clearRect(0,0,cw,ch);
  draw(shape1);
}


function draw(t){
  ctx.save();
  ctx.translate(t.x,t.y);
  ctx.rotate(t.rotation);
  ctx.beginPath();
  ctx.moveTo(t.points[0].x, t.points[0].y);
  for(var i=1;i<t.points.length;i++){
    ctx.lineTo(t.points[i].x,t.points[i].y);
  }
  ctx.closePath();
  ctx.fillStyle=t.fillcolor;
  ctx.strokeStyle=t.strokecolor;
  ctx.lineWidth=t.strokewidth;
  ctx.fill();
  ctx.stroke();
  ctx.restore();
}

function animate(){
  requestAnimationFrame(animate);
  drawAll();
  shape1.rotation+=angle1Degree;
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<p>Rotating a path (shape1) by changing shape1.rotation</p>
<canvas id="canvas" width=300 height=300></canvas>

Javascript画布绘图

1 个答案: