Canvas pixel-level collision-

Demo address 06wjin. sinaapp. comhtml5hitTest: drag the mouse. 1. First, judge whether there is a collision between the rectangle areas of the two images and determine the center distance between the two rectangles. 2. If the rectangle area is collided, check the pixels in the red rectangle area, there are two ways to determine a directly ....,. Demo address http://06wjin.sinaapp.com/html5/hitTest/ dragging with the mouse

1. First, determine whether the rectangular area of the two images has a collision.

Determine the center distance between two rectangles.

2. If there is a collision in the rectangle area, the pixels in the red rectangle area will be detected. There are two methods:
A directly checks whether the two bitmaps in the red rectangle contain a pixel whose alpha points are not 0. If yes, the bitmap will crash.

• Context. drawImage (img1, x1, y1); // draw the first bitmap
  
• Var data1 = context. getImageData (minx, miny, maxx-minx, maxy-miny). data; // obtain the first bitmap in the red rectangle.
  
• Context. clearRect (x1, y1, img1.width, img1.height); // clear the first bitmap
  
• Context. drawImage (img2, x2, y2); // draw the second bitmap.
  
• Var data2 = context. getImageData (minx, miny, maxx-minx, maxy-miny). data; // obtain the pixels in the red rectangle of the second chapter.
  
• 
  
• For (var I = 3; I <data1.length; I + = 4)
  
• {
  
• If (data1> 0 & data2> 0) return true; // cyclically judge the alpha value. Here we can set the transparent threshold value. For example, if 0 is changed to 0.2, it means that when the transparency is 0.2, it is considered as not a collision.
  
• }
  
• Return false;
  

B. Change the drawing mode to xor (xor refers to the transparency of the intersection part. For details, see the webmaster's previous tutorial ).

• Context. drawImage (img1, x1, y1 );//Draw the first bitmap
• Context. globalCompositeOperation = 'xor ';//Change the drawing mode to xor.
• Context. drawImage (img2, x2, y2 );//Draw the second bitmap
• Var data = context. getImageData (minx, miny, maxx-minx, maxy-miny). data;// Obtain the pixels in the red rectangle of the bitmap.
• Context. globalCompositeOperation = 'source-over ';// Change the drawing mode back.
• 
  
• For (var I = 3; I <data. length; I + = 4)
• {
• 
  
• If (data= 0) return true;// Collision if transparent pixels exist
• }
• Return false;
  

The following is a 2d sprite class. For collision, use sprite1.hitTest (sprite2) directly.

• Function Sprite (x, y, img, width, height)
• {
• This. x = x;
• This. y = y;
• This. img = document. getElementById (img );
• This. width = width;
• This. height = height;
• This. halfWidth = this. width/2;
• This. halfHeight = this. height/2;
• This. angle = 0; angle
• This. scaleX = 1; // horizontal scaling
• This. scaleY = 1; // Vertical Scaling
• This. alpha = 1; // transparency
• This. isDrug = false; // whether to drag
• }
• 
  
• Sprite. prototype. draw = function ()
• {
• Context. save ();
• Context. translate (this. x + this. halfWidth, this. y + this. halfHeight );
• Context. globalAlpha = this. alpha; // modify transparency
• Context. rotate (this. angle); // Rotation angle
• Context. scale (this. scaleX, this. scaleY); // zoom
• Context. drawImage (this. img,-this. halfWidth,-this. halfHeight );
• Context. restore ();
• }
• 
  
• Sprite. prototype. hitTest = function (sprite)
• {
• Var minx = this. x> sprite. x? This. x: sprite. x;
• Var maxx = this. x + this. width <sprite. x + sprite. width? This. x + this. width: sprite. x + sprite. width;
• Var miny = this. y> sprite. y? This. y: sprite. y;
• Var maxy = this. y + this. width <sprite. y + sprite. width? This. y + this. width: sprite. y + sprite. width;
• 
  
• If (minx> = maxx | miny> = maxy) {return false ;}
• 
  
• Var canvas = document. createElement ('canvas ');
• Canvas. setAttribute ('width', 550 );
• Canvas. setAttribute ('height', 400 );
• Var context = canvas. getContext ('2d ');
• 
  
• 
  
• /* Method 1 */
• Context. drawImage (this. img, this. x, this. y );
• Var data1 = context. getImageData (minx, miny, maxx-minx, maxy-miny). data;
• Context. clearRect (0, 0,550,400 );
• Context. drawImage (sprite. img, sprite. x, sprite. y );
• Var data2 = context. getImageData (minx, miny, maxx-minx, maxy-miny). data;
• 
  
• For (var I = 3; I <data1.length; I + = 4)
• {
• If (data1> 0 & data2> 0) return true;
• }
• Return false;
• 
  
• /* Method 2
• Context. drawImage (this. img, this. x, this. y );
• Context. globalCompositeOperation = 'xor ';
• Context. drawImage (sprite. img, sprite. x, sprite. y );
• Var data = context. getImageData (minx, miny, maxx-minx, maxy-miny). data;
• Context. globalCompositeOperation = 'source-over ';
• 
  
• For (var I = 3; I <data. length; I + = 4)
• {
• 
  
• If (data= 0) return true;
• }
• Return false ;*/
• }