preface

After reading Canvas – basic understanding, we must have a certain understanding of Canvas, so next, let’s play something slightly interesting….

The plot

  • DrawImage (image,x,y): Draw a separate image on the canvas (note: only after the image is loaded can canvas be used for drawing)
    • Parameters x, y: coordinates on the canvas
    • Ensure that images are loaded
image = new Image();
image.src = "Picture address";
image.onload = function(){
  context.drawImage(image,0.0);
}
Copy the code

  • drawImage(image,x,y,width,height):

    • Width, height: sets the height and width of the image, and scales the image
    • If the width and height parameters are not passed, the picture will be drawn on the canvas according to its original size, and the excess part will be clipped automatically

  • drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

    • Specify the image to use
    • (Optional) Picture – the x position where the clipping started,
    • (Optional) Picture – the y position where the shear started,
    • (Optional) Picture – Width of the image to be clipped.
    • (Optional) Picture – The height of the clipped image,
    • Put the x position of the image on the canvas,
    • Put the y position of the image on the canvas,
    • (Optional, stretch or shrink the image) The width of the image to use,
    • (Optional, stretch or shrink the image) The height of the image to use

Image tile

  • CreatePattern (image,type): does not draw an image. To set whether an image is tiled, draw separately using the draw method

  • Parameter type: indicates whether tiling is possible

    • No-repeat (no meaning, no tile, I will use drawImage, it does not taste good…)
    • repeat
    • repeat-x
    • repeat-y
var image = new Image();
image.src = '1.png';
image.onload = function () {
  var rpt = ctx.createPattern(image, 'repeat');
  ctx.fillStyle = rpt;
  ctx.fillRect(0.0, drawing.width, drawing.height);
};
Copy the code

Cut out the image

  • Load an image: drawImage() or createPattern()
  • Cut: Clip () – Cuts areas of any shape and size from the original canvas
  • Note: Once an area is clipped, all subsequent drawings are restricted to the clipped area (no access to other areas of the canvas). You can also save the current canvas area by using the save() method before using the clip() method and restore it at any time later (via the restore() method)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Draw a rectangle
ctx.rect(50.20.200.120);
ctx.stroke();
// Draw red rectangle
ctx.fillStyle="green";
ctx.fillRect(0.0.150.100);

/ / use the clip
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
// Clip a rectangular area
ctx.rect(50.20.200.120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle="green";
ctx.fillRect(0.0.150.100);
Copy the code

Off-screen canvas

  • When multiple canvases exist, you can load content from the second canvas onto the first canvas
  • ctx.drawImage(otherCanvas, x, y);

application

  • Watermark:Add a watermark to the image (the coding implementation of the watermark will be explained in detail in a later demo)
    • Set a separate canvas2 for the watermark
    • Then use ctx1.drawImage(canvas2,x,y)-xy to indicate the position of C2 on C1
  • Magnifying Glass: Add a magnifying glass effect to an image (in a later demo, the encoding implementation of the magnifying glass will be explained in detail)

Pixel processing

Get image pixels

  • imageDate = context.getImageData(x,y,w,h);
  • ImageDate object: Image data for a rectangular area
    • Width, height, data, where data is the image information, one-dimensional array

  • R – Red (0-255)
  • G – Green (0-255)
  • B – Blue (0-255)
  • A-alpha channel (0-255; 0 is transparent, 255 is fully visible)

Put the image information back into the canvas

  • context.putImageData(imageData,dx,dy,dirtyX,dirtyY,dirtyW,dirtyH)
    • ImageData A one-dimensional array of image information
    • Dx, dy places imageData in the canvas
    • DirtyX, if it’s set, it’s going to add up to dx
    • DirtyY, if you set it, it’s going to add up to dy

Create the imageData

  • Creating a rectangular image
  • context.createImageData(w,h)

An 🌰

  • Create a rectangular image with the first pixel turned red, the second green, and the others light green

var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var imgData = ctx.createImageData(100.100);

// The first pixel turns red
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;

// The second pixel turns green
imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;

for (var i = 8; i < imgData.data.length; i += 4) {
  imgData.data[i + 0] = 0;
  imgData.data[i + 1] = 66;
  imgData.data[i + 2] = 0;
  imgData.data[i + 3] = 77;
}
ctx.putImageData(imgData, 10.10);
Copy the code

Raise an 🌰 again

canvas.width = 500;
canvas.height = 500;

var imageData = ctx.createImageData(canvas.width, canvas.height);
var pixelData = imageData.data;

for (var i = 0; i < canvas.height; i++) {
  for (var j = 0; j < canvas.width; j++) {
    var p = i * canvas.width + j;
    pixelData[4 * p + 0] = parseInt(Math.pow(Math.cos(Math.atan2(j - 250, i - 250) / 2), 2) * 255);
    pixelData[4 * p + 1] = parseInt(
      Math.pow(Math.cos(Math.atan2(j - 250, i - 250) / 2 - (2 * Math.acos(-1)) / 3), 2) * 255
    );
    pixelData[4 * p + 2] = parseInt(
      Math.pow(Math.cos(Math.atan2(j - 250, i - 250) / 2 + (2 * Math.acos(-1)) / 3), 2) * 255
    );
    pixelData[4 * p + 3] = 255;
  }
}

ctx.putImageData(imageData, 0.0.0.0, canvas.width, canvas.height);
Copy the code

The canvas method

State method

  • Save () : Saves the current Canvas Settings
  • Restore () : Restores the Settings

Conversion method:

  • Scale: Set to zoom in or out before drawing
  • Translate (x, Y): Remap the origin of the canvas (the effect is where the image moves) before drawing
  • Rotate (number of degrees * math.pi /180):Rotate the image at the origin of the canvas before drawing
    • The origin is in the upper left corner of the canvas

Small classic example of image processing

Canvas advanced image processing classic small example