Javascript画布绘制

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

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

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

• 通过将形状的特性放置在对象中来定义形状

• 使用该对象作为模板在画布上绘制形状

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

• 清除画布

• 更改路径位置和旋转的定义

• 使用更改的对象作为模板在画布上重新绘制形状

下面是示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var angle1Degree=Math.PI/180；
//通过将形状的特性放置在对象中来定义形状
变量形状1={
点：[{x:0，y:0}，{x:50，y:0}，{x:100，y:50}，{x:0，y:50}]，
填充颜色：'天蓝色'，
strokecolor:“浅灰色”，
冲程宽度：3，
x:100，
y:100，
轮换：0，
}
制作动画（）；
函数drawAll（）{
ctx.clearRect（0,0，cw，ch）；
绘制（形状1）；
}
函数图（t）{
ctx.save（）；
翻译（t.x，t.y）；
ctx.旋转（t.旋转）；
ctx.beginPath（）；
移动到（t.points[0].x，t.points[0].y）；
对于（var i=1；iYou可以创建一个路径的节点（点）数组，并为数组中的每个节点画一条线，如果这是您要问的。我真的不知道使用点符号访问变量是什么意思？要旋转路径，您应该旋转每个点并重新绘制路径。简单的方法是使用。谢谢，这很有帮助