javascript - 重新对齐 Javascript/Canvas 绘图？

Question

所以我有一张别人给我的半复杂 Canvas 。它垂直绘制图像(即自上而下)。让我们假设它是一个具有面部特征的简笔画。

这是在 Javascript 和 Canvas 中完成的。即:ctx.beginPath()、ctx.moveTo(x,y)、ctx.lineTo(1,1)等

我希望简笔画朝某个点 (x,y) 移动，并在朝该方向移动时面向该方向。例如，如果 x,y 位于右下角附近，我希望简笔画的方向能够使其脚在移动时面向右下角。

主要问题是，在知道我有一张“硬编码”绘图(在本例中为火柴人)的情况下，我将如何执行此操作(即更改火柴人)？

Answer 1

您可以将接收到的图像渲染在单独的 Canvas 上(不需要显示)，并使用 ctx.canvas.toDataURL() 将其转换为图像。然后，您可以将生成的图像嵌入到 Canvas 中并更轻松地对其应用变换。

我在对该问题的评论中提到了这一点，但这听起来很有趣，所以我实现了概念验证。

var canvasObject = function(ctx) {
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.arc(30,30,15,0,2*Math.PI);
  ctx.fillStyle='red';
  ctx.fill();
  return ctx;
}

var myCtx = document.querySelector('canvas').getContext('2d');
var objCtx = document.createElement('canvas').getContext('2d');
var renderedObjUrl = canvasObject(objCtx).canvas.toDataURL();
var renderedObj = document.createElement('img');
renderedObj.setAttribute('src', renderedObjUrl);

myCtx.drawImage(renderedObj, 30, 10);

<canvas id="myCanvas" width="600" height="400"></canvas>