Question

我正在尝试画布，我遇到了一些麻烦。

请参阅此codepen：

http://codepen.io/JonnyBoggon/pen/YGgKqQ

我想生成两个（或更多可能）浮动图像 - 碰撞 - 就像我的codepen中的圆圈一样。所以，就像现在一样，但是用图像而不是圆圈。

function makeAmpersands(num) {
      var x, y, vx, vy, r, m, ke, colliding, src;

      for (var i = 0; i < num; i++) {
         x = Math.random() * canvas.width;
         y = Math.random() * canvas.height;
         vx = Math.random() * 1 - .5;
         vy = Math.random() * 1 - .5;
         r = 150;
         m = density * (4 / 3) * Math.PI * Math.pow(r, 3);
         ke = .5 * m * (vx + vx) * (vy + vy);
         colliding = false;
         src = siteURL+'/assets/img/floating-ampersand-1.png';

         B.push(new ampersand(x, y, vx, vy, r, m, ke, colliding, src));
      }
   }

我不知道如何将这些对象转换为图像对象，每个对象都有不同的src。

请原谅我对画布缺乏了解;这是我创造一些东西的第一次尝试。

非常感谢任何帮助。

Answer 1

使用画布2D

加载和渲染图像

创建并加载图片

创建一个新的Image对象，为src分配您要加载的图片的网址。然后图像将开始加载。您将无法知道图像加载所需的时间，因此您需要等到图像触发onload事件，或者如果您确定资源始终可用，则仅使用图像complete属性为=== true

由于我不知道您的图像资源是否可靠，下面的代码是上述方法的混合，使用onload事件标记图像已加载。

var image = new Image(); // a new image object same as <img> tag
image.src = "imageURL";  // the url pointing to the image 
image.onload = function(){ this.ready = true; };  // flag image ready
                                                  // This will not happen until
                                                  // the current code has exited

在画布上绘制图像。

要渲染图像，请使用2D上下文函数drawImage。此函数最多有9个参数，其中许多参数是可选的。有关详细信息，请参阅MDN drawImage。

如果您尝试在加载之前渲染图像，那么您当然看不到任何内容。如果图像在加载过程中出现错误，则尝试绘制它可能会引发错误并阻止代码运行。因此，请务必确保您的图像准备好并且可以安全地绘制。

从上面的图片加载代码段中，以下代码段会呈现图片

if(image.ready){   // is it ready
    ctx.drawImage(image,x,y);  // draw image with top left at x,y
}

加载许多图片。

每次渲染图像时检查图像都是低效的。一旦准备好，它总是如此。 This answer显示了如何加载许多图片。如果你有一个正在进行的动画而不是在加载所有图像时调用drawImages函数，请调用一个启动动画的函数，或设置一个标志来指示所有图像都已加载并且可以安全渲染。

完整的图像渲染功能。

2D API允许您绘制缩放，旋转，淡入/淡出的图像。渲染这样的图像有时被称为精灵（从旧的16位日起）

用于围绕其中心旋转绘制缩放的旋转褪色图像/精灵的功能。 x和y是画布中心所在的位置。 scale为1表示无刻度，＆lt; 1表示较小，＆gt; 1表示较大。 rot是旋转，0表示无旋转。 Math.PI是180度。增加的腐烂将以顺时针方向旋转，减少将以另一种方式旋转。 alpha将设置图像的透明度，0表示不可见，1表示完全可见。尝试使用0-1范围之外的值设置全局alpha将不会导致任何更改。下面的代码进行检查以确保alpha被钳制。如果您信任Alpha值，则可以直接设置globalAlpha

function drawSprite(image,x,y,scale,rot,alpha){
     ctx.setTransform(scale,0,0,scale,x,y);
     ctx.rotate(rot);
     ctx.globalAlpha = alpha < 0 ? 0 : alpha > 1 ? 1 : alpha; // if you may have 
                                                              // alpha values outside
                                                              // the normal range
     ctx.drawImage(image,-image.width / 2, -image.height / 2);
}
// usage
drawSprite(image,x,y,1,0,1); // draws image without rotation or scale
drawSprite(image,x,y,0.5,Math.PI/2,0.5); // draws image rotated 90 deg
                                         // scaled to half its size
                                         // and semi transparent

该函数保留当前变换和alpha。如果在其他地方渲染（不使用此函数），则需要重置2D上下文的当前状态。

默认

ctx.setTransform(1,0,0,1,0,0);
ctx.globalAlpha = 1;

保持当前状态

ctx.save();
// draw all the sprites
ctx.restore();

在HTML5画布中生成图像

1 个答案:

使用画布2D