Question

所以我画了一张半复杂的画布，有人给了我。它垂直绘制图像（即自上而下）。让我们假设它具有面部特征的棒图。

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

我希望棒图朝某个点（x，y）移动，并朝着那个方向移动。例如，如果x，y靠近右下方，我希望棒图的方向使得它的脚在移动时朝向右下方。

主要的问题是，我怎么会这样做（即改变火柴人），知道我有一个＆＃34;硬编码＆＃34;已经给我的绘画（在这个例子中，火柴人）？

Answer 1

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

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

＆＃13;

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);

＆＃13;

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

＆＃13;

重新调整Javascript / Canvas绘图？

1 个答案: