Javascript 画布人物移动到右侧

代码如下：

$（文档）.ready（函数（）{
var canvas=$（“#canvas”）[0]；
var context=canvas.getContext（“2d”）；
canvas.width=window.innerWidth
canvas.height=window.innerHeight
多边形（上下文，120，120，50，12）；
stroke（）；
})
函数多边形（ctx、x、y、半径、边）{
如果（侧面<3）返回；
变量a=（（数学PI*2）/边；
ctx.beginPath（）；
ctx.translate（x，y）；
ctx.moveTo（半径，0）；
对于（变量i=1；i

哎呀。。升级浏览器

绘制完所需形状后，将其恢复到原始位置，以便从与第一个形状相同的相对位置绘制下一个形状

ctx.translate(-x, -y);

$（文档）.ready（函数（）{
var canvas=$（“#canvas”）[0]；
var context=canvas.getContext（“2d”）；
canvas.width=window.innerWidth
canvas.height=window.innerHeight
多边形（上下文，120，120，50，12）；
stroke（）；
多边形（上下文，120220,50,12）；
stroke（）；
})
函数多边形（ctx、x、y、半径、边）{
如果（侧面<3）返回；
变量a=（（数学PI*2）/边；
ctx.beginPath（）；
ctx.translate（x，y）；
ctx.moveTo（半径，0）；
对于（变量i=1；i

哎呀。。升级浏览器

在绘制每个形状之前，将转换矩阵重置为标识矩阵：

context.setTransform(1, 0, 0, 1, 0, 0);

---

您对多边形反复使用相同的二维上下文。上下文将保存翻译的状态，因此连续的翻译相加。通过在每个

多边形

调用的末尾使用相同的负值进行翻译，可以“还原”翻译的效果

$（文档）.ready（函数（）{
var canvas=$（“#canvas”）[0]；
var context=canvas.getContext（“2d”）；
canvas.width=window.innerWidth
canvas.height=window.innerHeight
多边形（上下文，120，120，50，12）；
stroke（）；
多边形（上下文，120、220、50、12）；
stroke（）；
})
函数多边形（ctx、x、y、半径、边）{
如果（侧面<3）返回；
变量a=（（数学PI*2）/边；
ctx.beginPath（）；
ctx.translate（x，y）；
ctx.moveTo（半径，0）；
对于（变量i=1；i

哎呀。。升级您的浏览器

我认为这是因为：

ctx.translate(x, y);

如果仔细观察定义和用法，您会发现translate（）方法会重新映射画布的（0,0）位置，而不是设置绘图的起点。因此，如果您执行如下函数调用：

ctx.translate(120, 120);
ctx.translate(120, 220);

您实际上移动了画布的注册点两次。第一次将移动（120120），之后将移动（120220），因此第一个多边形将正确绘制，但第二个多边形将在位置（240340）上绘制，因为两个起点的坐标最终将求和