我不想为你们写这部法典,因为它需要一定时间,我相信你能够找到网上的例子,但我要告诉大家,为了做到这一点,你需要知道的理论。

1. Create an in-memory canvas (using document.createElement( canvas )) that will never be seen on the page. This canvas must be at least as large as your object. I m going to assume it is exactly as large as your object. We ll call this tempCanvas and it has tempCtx
2. Draw your object to tempCtx.
3. There will be some event that you didn t mention exactly but I m sure you have in mind. Either you press a button or click on the object and it "explodes". For the sake of picking something I ll assume you want it to explode on click.

爆炸:

1. Draw the object onto your normal context: ctx.drawImage(tempCanvas, x, y) so the user sees something
2. You re going to want to have an array of pixels for the location of each pixel in tempCanvas. So if tempCanvas is 20x30 you ll want an array of [20][30] to correspond.
3. You have to keep data for each of those pixels. Specifically, their starting point, which is easy, because pixel [2][4] s starting point is (2,4)! And also their current location, which is identical to starting point at first but will change on each frame.
4. When the explosion event occurs keep track of the original mouse x and y position.
5. At this point for every single pixel you have a vector which means you have a direction. If you clicked in the middle of the object you ll want to save the mouse coordinates of (10,15) (see note 1). So now all of the pixels of the to-be-exploded image have their trajectory. There s a bit of math here that I m taking for granted, but if you search separate topics either on SO or on the internet you ll find out how to find the slope/etc of these lines and continue them.
6. For every frame hereafter you must take each pixel [x][y] and use ctx.drawImage(tempCanvas, x, y, 1, 1, newX, newY, 1, 1) where x and y are the same as the pixel s [x][y] and the newX and newY are calculated using the vector and finding what the next point would be along its line.

其结果将是从原点点点略多的某个地点抽取图像的每个图形。 如果你在框架之后继续这样做,就会看看该物体是否爆炸。

这是一条总的想法。 让我知道,其中是否有任何内容不明确。

说明 1. 您的正常血管胜出的频率与发射物体相同。 也许该物体被放置在10时05分,因此,你真心要点击110 115而不是10.15。 仅为了简单起见,我略去掉。