Summary of the use of canvas in HTML5

1. Overview

Canvas API (canvas) is used to generate images in real time on web pages and can manipulate image content. Basically it is a bitmap (bitmap) that can be manipulated with JavaScript. Before use, you first need to create a new web page element.

<canvas id="myCanvas" width="400" height="200">
  您的浏览器不支持canvas！</canvas>

In the above code, if the browser does not support this API, the text in the middle of the tag will be displayed - "Your browser does not support canvas!".

Each canvas node has a corresponding context object (context object). The Canvas API is defined on this context object, so you need to obtain this object by using the getContext method.

var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
}

In the above code, the getContext method specifies the parameter 2d, which means that the canvas node is used to generate 2D patterns (i.e. flat patterns). If the parameter is webgl, it means that it is used to generate 3D images (ie, three-dimensional patterns). This part is actually called WebGL API alone.

2. Drawing method

Canvas canvas provides a flat space for drawing. Each point in the space has its own coordinates, x represents the abscissa, and y represents the vertical coordinate. The origin (0, 0) is located in the upper left corner of the image. The positive direction of the x-axis is to the right of the origin, and the positive direction of the y-axis is downward from the origin.

(1) Drawing a path

beginPath method indicates starting to draw a path, moveTo(x, y) method sets the starting point of the line segment, lineTo(x, y) method sets the end point of the line segment, and the stroke method is used to color transparent line segments.

ctx.beginPath(); // 开始路径绘制
ctx.moveTo(20, 20); // 设置路径起点，坐标为(20,20)
ctx.lineTo(200, 20); // 绘制一条到(200,20)的直线
ctx.lineWidth = 1.0; // 设置线宽
ctx.strokeStyle = '#CC0000'; // 设置线的颜色
ctx.stroke(); // 进行线的着色，这时整条线才变得可见

The moveto and lineto methods can be used multiple times. Finally, you can also use the closePath method to automatically draw a straight line from the current point to the starting point to form a closed figure, eliminating the need to use the lineto method once.

(2) Draw a rectangle The fillRect(x, y, width, height) method is used to draw a rectangle. Its four parameters are the x coordinate and y coordinate of the upper left corner vertex of the rectangle, as well as the width and height of the rectangle. The fillStyle property is used to set the fill color of the rectangle.

ctx.fillStyle = 'yellow';
ctx.fillRect(50, 50, 200, 100);

strokeRect method is similar to fillRect, used to draw hollow rectangles.

ctx.strokeRect(10,10,200,100);

clearRect method is used to clear the contents of a rectangular area.

ctx.clearRect(100,50,50,50);

(3) Draw text

fillText(string, x, y) is used to draw text. Its three parameters are the text content, the x coordinate and the y coordinate of the starting point. Before use, you need to use font to set the font, size, and style (the writing method is similar to the font attribute of CSS). Similar to this, there is the strokeText method, which is used to add hollow words.

ctx.font = "Bold 20px Arial"; // 设置字体
ctx.textAlign = "left";// 设置对齐方式
ctx.fillStyle = "#008600"; // 设置填充颜色
ctx.fillText("Hello!", 10, 50); // 设置字体内容，以及在画布上的位置
ctx.strokeText("Hello!", 10, 100); // 绘制空心字

fillText method does not support text line breaking, that is, all text appears in one line. Therefore, if you want to generate multiple lines of text, you can only call the fillText method multiple times.

(4) Draw circles and sectors

arc method is used to draw sectors.

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

The x and y parameters of the arc method are the coordinates of the center of the circle, radius is the radius, startAngle and endAngle are the starting angle and ending angle of the sector (expressed in radians), anticlockwise indicates whether the drawing should be drawn counterclockwise (true) or not Draw clockwise (false).

Here is how to draw a solid circle:

ctx.beginPath(); 
ctx.arc(60, 60, 50, 0, Math.PI*2, true); 
ctx.fillStyle = "#000000"; 
ctx.fill();

Example of drawing a hollow circle:

ctx.beginPath(); 
ctx.arc(60, 60, 50, 0, Math.PI*2, true); 
ctx.lineWidth = 1.0; 
ctx.strokeStyle = "#000"; 
ctx.stroke();

(5) Set the gradient color

The createLinearGradient method is used to set the gradient color.

var myGradient = ctx.createLinearGradient(0, 0, 0, 160); 
myGradient.addColorStop(0, "#BABABA"); 
myGradient.addColorStop(1, "#636363");

The parameters of the createLinearGradient method are (x1, y1, x2, y2), where x1 and y1 are the starting point coordinates, and x2 and y2 are the end point coordinates. Through different coordinate values, gradients from top to bottom, left to right, etc. can be generated. The usage method is as follows:

ctx.fillStyle = myGradient;
ctx.fillRect(10,10,200,100);

(6) Set the shadow

A series of shadow-related methods can be used to set the shadow.

ctx.shadowOffsetX = 10; // 设置水平位移
ctx.shadowOffsetY = 10; // 设置垂直位移
ctx.shadowBlur = 5; // 设置模糊度
ctx.shadowColor = "rgba(0,0,0,0.5)"; // 设置阴影颜色
ctx.fillStyle = "#CC0000"; 
ctx.fillRect(10,10,200,100);

3. Image processing method

drawImage method

Canvas API allows inserting image files into the canvas. The method is to read the image and use the drawImage method to redraw it in the canvas.

var img = new Image();
img.src = 'image.png';
ctx.drawImage(img, 0, 0); // 设置对应的图像对象，以及它在画布上的位置

The above code loads a PNG image into the canvas. The drawImage() method accepts three parameters. The first parameter is the DOM element of the image file (i.e. node). The second and third parameters are the coordinates of the upper left corner of the image in the canvas. In the above example (0, 0) means placing the upper left corner of the image at the upper left corner of the canvas.

Since the loading of images takes time, the drawImage method can only be called after the image is completely loaded, so the above code needs to be rewritten.

var image = new Image();
image.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext('2d').drawImage(image, 0, 0);
    // 插入页面底部
    document.body.appendChild(image);
    return canvas;
}
image.src = 'image.png';

getImageData method, putImageData method

getImageData method can be used to read the contents of Canvas and return an object containing the information of each pixel.

var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

The imageData object has a data attribute, and its value is a one-dimensional array. The value of this array is the red, green, blue, and alpha channel values ​​of each pixel in sequence, so the length of the array is equal to the pixel width of the image x the pixel height of the image x 4, and the range of each value is 0–255. This array is not only readable, but also writable, so by manipulating the values ​​of this array, you can achieve the purpose of manipulating images. After modifying this array, use the putImageData method to redraw the array contents on the Canvas.

context.putImageData(imageData, 0, 0);

toDataURL method

After modifying the image data, you can use the toDataURL method to re-convert the Canvas data into a general image file form.

function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL('image/png');
    return image;
}

The above code converts Canvas data into PNG data URI.

save method, restore method

save method is used to save the context, restore method is used to restore to the last saved context

ctx.save();
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.fillStyle = '#CC0000';
ctx.fillRect(10,10,150,100);
ctx.restore();
ctx.fillStyle = '#000000';
ctx.fillRect(180,10,150,100);

上面代码先用save方法，保存了当前设置，然后绘制了一个有阴影的矩形。接着，使用restore方法，恢复了保存前的设置，绘制了一个没有阴影的矩形。

4.动画

利用JavaScript，可以在canvas元素上很容易地产生动画效果。

var posX = 20,
    posY = 100;
setInterval(function() {
    context.fillStyle = "black";
    context.fillRect(0,0,canvas.width, canvas.height);

    posX += 1;
    posY += 0.25;

    context.beginPath();
    context.fillStyle = "white";

    context.arc(posX, posY, 10, 0, Math.PI*2, true); 
    context.closePath();
    context.fill();
}, 30);

上面代码会产生一个小圆点，每隔30毫秒就向右下方移动的效果。setInterval函数的一开始，之所以要将画布重新渲染黑色底色，是为了抹去上一步的小圆点。
通过设置圆心坐标，可以产生各种运动轨迹。
先上升后下降。

var vx = 10,
    vy = -10,
    gravity = 1;
setInterval(function() {
    posX += vx;
    posY += vy;
    vy += gravity;
    // ...
});

上面代码中，x坐标始终增大，表示持续向右运动。y坐标先变小，然后在重力作用下，不断增大，表示先上升后下降。小球不断反弹后，逐步趋于静止。

var vx = 10,
    vy = -10,
    gravity = 1;
setInterval(function() {
    posX += vx;
    posY += vy;
    if (posY > canvas.height * 0.75) {
          vy *= -0.6;
          vx *= 0.75;
          posY = canvas.height * 0.75;
    }
    vy += gravity;
    // ...
});

上面代码表示，一旦小球的y坐标处于屏幕下方75%的位置，向x轴移动的速度变为原来的75%，而向y轴反弹上一次反弹高度的40%。

5.像素处理

通过getImageData方法和putImageData方法，可以处理每个像素，进而操作图像内容。假定filter是一个处理像素的函数，那么整个对Canvas的处理流程，可以用下面的代码表示。

if (canvas.width > 0 && canvas.height > 0) {
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    filter(imageData);
    context.putImageData(imageData, 0, 0);
}

以下是几种常见的处理方法:

灰度效果

灰度图（grayscale）就是取红、绿、蓝三个像素值的算术平均值，这实际上将图像转成了黑白形式。假定d[i]是像素数组中一个象素的红色值，则d[i+1]为绿色值，d[i+2]为蓝色值，d[i+3]就是alpha通道值。转成灰度的算法，就是将红、绿、蓝三个值相加后除以3，再将结果写回数组。

grayscale = function (pixels) {
    var d = pixels.data;
    for (var i = 0; i < d.length; i += 4) {
      var r = d[i];
      var g = d[i + 1];
      var b = d[i + 2];
      d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3;
    }
    return pixels;
};

复古效果

复古效果（sepia）则是将红、绿、蓝三个像素，分别取这三个值的某种加权平均值，使得图像有一种古旧的效果。

sepia = function (pixels) {
    var d = pixels.data;
    for (var i = 0; i < d.length; i += 4) {
      var r = d[i];
      var g = d[i + 1];
      var b = d[i + 2];
      d[i]     = (r * 0.393)+(g * 0.769)+(b * 0.189); // red
      d[i + 1] = (r * 0.349)+(g * 0.686)+(b * 0.168); // green
      d[i + 2] = (r * 0.272)+(g * 0.534)+(b * 0.131); // blue
    }
    return pixels;
};

红色蒙版效果

红色蒙版指的是，让图像呈现一种偏红的效果。算法是将红色通道设为红、绿、蓝三个值的平均值，而将绿色通道和蓝色通道都设为0。

red = function (pixels) {
    var d = pixels.data;
    for (var i = 0; i < d.length; i += 4) {
      var r = d[i];
      var g = d[i + 1];
      var b = d[i + 2];
      d[i] = (r+g+b)/3;        // 红色通道取平均值
      d[i + 1] = d[i + 2] = 0; // 绿色通道和蓝色通道都设为0
    }
    return pixels;
};

亮度效果

亮度效果（brightness）是指让图像变得更亮或更暗。算法将红色通道、绿色通道、蓝色通道，同时加上一个正值或负值。

brightness = function (pixels, delta) {    var d = pixels.data;    for (var i = 0; i < d.length; i += 4) {
          d[i] += delta;     // red
          d[i + 1] += delta; // green
          d[i + 2] += delta; // blue   
    }    return pixels;
};

反转效果

反转效果（invert）是指图片呈现一种色彩颠倒的效果。算法为红、绿、蓝通道都取各自的相反值（255-原值）。

invert = function (pixels) {    var d = pixels.data;    for (var i = 0; i < d.length; i += 4) {
        d[i] = 255 - d[i];
        d[i+1] = 255 - d[i + 1];
        d[i+2] = 255 - d[i + 2];
    }    return pixels;
};