Question

所以我有一个绘制的对象：

并将其放在一个区块中

我需要它使用requestAnimationFrame（）方法为它设置动画，并使用translate，rotate，scale从底部跳到顶部向右滑动。

问题是我不知道如何将我制作的所有形状合并到一个（或如何动画）。

形状的代码是：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var counterClockwise = false;

ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "white";
ctx.moveTo(10, 10);
ctx.lineTo(10, 100);
ctx.stroke();

ctx.beginPath();
ctx.arc(12, 38, 26, 4.7, Math.PI * .5, false);
ctx.lineWidth = "5";
ctx.strokeStyle = 'white';
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "green";
ctx.moveTo(60, 10);
ctx.lineTo(40, 100);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "green";
ctx.moveTo(60, 10);
ctx.lineTo(80, 100);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "purple";
ctx.moveTo(80, 10);
ctx.bezierCurveTo(100, 145, 150, 100, 145, 10);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "cyan";
ctx.moveTo(160, 10);
ctx.lineTo(160, 95);
ctx.lineTo(200, 95);
ctx.stroke();

#myCanvas { background: #F00; }

<canvas id="myCanvas"></canvas>

提前致谢。

Answer 1

您可以在＆＃34;输出＆＃34;上绘制另一个画布的内容。使用drawImage的画布（参见MDN）。此示例显示如何使用dWidth和dHeight参数缩放图像：

＆＃13;

var c = document.getElementById("myCanvas");
var out = document.getElementById("out");
var ctx = c.getContext("2d");
var outCtx = out.getContext("2d");
var counterClockwise = false;
draw();

outCtx.drawImage(c, 0, 10, 150, 150) 

function draw() {
  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "white";
  ctx.moveTo(10, 10);
  ctx.lineTo(10, 100);
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(12, 38, 26, 4.7, Math.PI * .5, false);
  ctx.lineWidth = "5";
  ctx.strokeStyle = 'white';
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "green";
  ctx.moveTo(60, 10);
  ctx.lineTo(40, 100);
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "green";
  ctx.moveTo(60, 10);
  ctx.lineTo(80, 100);
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "purple";
  ctx.moveTo(80, 10);
  ctx.bezierCurveTo(100, 145, 150, 100, 145, 10);
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "cyan";
  ctx.moveTo(160, 10);
  ctx.lineTo(160, 95);
  ctx.lineTo(200, 95);
  ctx.stroke();
}

＆＃13;

canvas { background: #F00; }

＆＃13;

<canvas id="myCanvas"></canvas>
<canvas id="out"></canvas>

＆＃13;

Answer 2

你不需要额外的画布标签。您将需要创建新对象。

就像这样：

将enableRotate更改为true以查看同时旋转。

var c = document.getElementById("myCanvas");
var out = document.getElementById("out");
var ctx = c.getContext("2d");
var outCtx = out.getContext("2d");
var counterClockwise = false;


var IAM_ANIMATION = {

  globalLeft : 0 ,  // increment all x 
  globalTop : 0 , // increment all y 
  rotate : 0 , // rotate angle 
  speed : 0.1 ,
  enableRotate : false , 
  translate : function (){

      // look at 
      // http://stackoverflow.com/questions/13849185/moving-an-object-along-a-straight-line-at-a-constant-speed-from-point-a-to-b
      // http://jsfiddle.net/loktar/CajbL/
  },

};

draw();


   // just for example i will create interval 

   setInterval( function (){
 
IAM_ANIMATION.globalLeft = IAM_ANIMATION.globalLeft +     
IAM_ANIMATION.speed; 

if (IAM_ANIMATION.enableRotate == true) {
IAM_ANIMATION.rotate = IAM_ANIMATION.rotate + IAM_ANIMATION.speed; 
}
 
  draw()

   } ,10);

outCtx.drawImage(c, 0, 0) 

function draw() {

  ctx.clearRect(0, 0, c.width, c.height);

  ctx.save()

  ctx.rotate( IAM_ANIMATION.rotate * Math.PI/180);

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "white";
  ctx.moveTo( IAM_ANIMATION.globalLeft + 10, IAM_ANIMATION.globalTop + 10);
  ctx.lineTo(IAM_ANIMATION.globalLeft + 10, IAM_ANIMATION.globalTop + 100);
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(IAM_ANIMATION.globalLeft +12,IAM_ANIMATION.globalTop + 38, 26, 4.7, Math.PI * .5, false);
  ctx.lineWidth = "5";
  ctx.strokeStyle = 'white';
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "green";
  ctx.moveTo( IAM_ANIMATION.globalLeft + 60,IAM_ANIMATION.globalTop + 10);
  ctx.lineTo(IAM_ANIMATION.globalLeft + 40, IAM_ANIMATION.globalTop +100);
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "green";
  ctx.moveTo( IAM_ANIMATION.globalLeft + 60,IAM_ANIMATION.globalTop + 10);
  ctx.lineTo( IAM_ANIMATION.globalLeft +  80, IAM_ANIMATION.globalTop +100);
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "purple";
  ctx.moveTo(IAM_ANIMATION.globalLeft +80,IAM_ANIMATION.globalTop + 10);
  ctx.bezierCurveTo(IAM_ANIMATION.globalLeft +100, IAM_ANIMATION.globalTop + 145, IAM_ANIMATION.globalLeft +150, IAM_ANIMATION.globalTop +100,IAM_ANIMATION.globalLeft + 145, IAM_ANIMATION.globalTop +10);
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "cyan";
  ctx.moveTo( IAM_ANIMATION.globalLeft + 160,IAM_ANIMATION.globalTop + 10);
  ctx.lineTo( IAM_ANIMATION.globalLeft + 160,IAM_ANIMATION.globalTop + 95);
  ctx.lineTo( IAM_ANIMATION.globalLeft + 200,IAM_ANIMATION.globalTop + 95);
  ctx.stroke();


  ctx.restore();


}

<canvas id="myCanvas"></canvas>
<canvas id="out"></canvas>
 <style>canvas { background: #F00; }</style>

下一级是创建类PAUL：例如var NEW_PAUL = new PAUL（“输入文字”）;

我为canvas对象构建了整个系统支持。我的想法是一个用户可见视图的画布。查看我的画布代码的更多信息： https://bitbucket.org/nikola_l/visual-js

Rotate and translate 在jsFiddle online examples

查看所有内容

在画布中设置绘制对象的动画

2 个答案: