在HTML5画布中生成图像 [英] Generating images in HTML5 canvas

问题描述

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

I am experimenting with canvas and I am having some trouble.

请看这个代码：

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

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

I would like to generate two (or more potentially) floating images - which collide - like the circles in my codepen. So, exactly as it is now, but with images rather than circles.

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。

I have no idea how to turn those objects into an image object, with a different src for each.

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

Please excuse my lack of knowledge with canvas; this is my first attempt at creating something.

非常感谢任何帮助。

推荐答案

使用画布2D加载和渲染图像

创建并加载图像

创建一个新的图像对象，分配 src 您要加载的图像的URL。然后图像将开始加载。您将无法知道图像加载所需的时间，因此您需要等到图像触发 onload 事件或者您确定该资源将如果完成属性为 === true

Create an new Image object, assign the src the URL of the image you wish to load. The image will then begin to load. You will not be able to know how long the image may take to load so you need to either wait until the image fires the onload event or if you are sure that the resource will always be available only use the image if its complete property is === true

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

As I do not know if your images resource is reliable the code below is a mix of the above method, using the onload event to flag that the image has loaded.

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 。

To render the image use the 2D context function drawImage. This function has up to 9 arguments many of which are optional. For full details see MDN drawImage.

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

If you try to render the image before it has loaded then you will of course not see anything. If the image has an error during loading attempting to draw it may throw an error and stop your code from running. So always be sure your image is ready and safe to draw.

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

From the above image load snippet the following snippet renders the image

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

加载许多图像。

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

It is inefficient to check the image for ready each time you render it. Once ready it is always so. This answer shows how you can load many images. If you have an ongoing animation instead of calling the drawImages function when all images have loaded, call a function that starts the animation, or set a flag to indicate that all images have loaded and are safe to render.

完整的图像渲染功能。

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

The 2D API allows you to draw an image that is scaled, rotated, fade in/out. Rendering a image like this is sometimes called a sprite (From the old 16bit days)

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

Function to draw a scaled rotated faded image / sprite with the rotation around its center. x and y are the position on the canvas where the center will be. scale is 1 for no scale <1 for smaller, and >1 for larger. rot is the rotation with 0 being no rotation. Math.PI is 180 deg. Increasing rot will rotate in a clockwise direction decreasing will rotate the other way. alpha will set how transparent the image will be with 0 being invisible and 1 as fully visible. Trying to set global alpha with a value outside 0-1 range will result in no change. The code below does a check to ensure that alpha is clamped. If you trust the alpha value you can set globalAlpha directly

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上下文的当前状态。

The function leaves the current transform and alpha as is. If you render elsewhere (not using this function) you need to reset the current state of the 2D context.

默认

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

保持当前状态使用

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

这篇关于在HTML5画布中生成图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！