Basic tutorial on drawing text and pictures in HTML5 Canvas_html5 tutorial skills

Draw text

In HTML5, we can also draw the text we need on the Canvas "canvas". The main properties and methods of the CanvasRenderingContext2D object involved are as follows:

属性或方法	基本描述
font	设置绘制文字所使用的字体，例如20px 宋体，默认值为10px sans-serif。该属性的用法与css font属性一致，例如italic bold 14px/30px Arial,宋体
fillStyle	用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
strokeStyle	用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
fillText(string text, int x, int y[, int maxWidth])	从指定坐标点位置开始绘制填充的文本文字。参数maxWidth是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。与本方法对应的样式设置属性为fillStyle。
strokeText(string text, int x, int y[, int maxWidth])	从指定坐标点位置开始绘制非填充的文本文字(文字内部是空心的)。参数maxWidth是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。该方法与fillText()用法一致，不过strokeText()绘制的文字内部是非填充(空心)的，fillText()绘制的文字是内部填充(实心)的。与本方法对应的样式设置属性为strokeStyle。

From the above API description information, we can know that there are two ways to draw text in Canvas: one is to use fillText() fillStyle to draw filled (solid) text; the other is to use strokeText () strokeStyle draws non-filled (hollow) text.

Next, let’s take a look at how to use canvas to draw solid text. The specific html code is as follows:

JavaScript CodeCopy content to clipboard

4. "UTF-8">
10. "myCanvas" width="400px" height="300px" style="border: 1px solid red;">
11. Your browser does not support the canvas tag.

The corresponding display effect is as follows:

Next, we keep other environmental conditions unchanged and use the strokeText() strokeStyle method again to draw the text in the above example. The corresponding JavaScript code is as follows:

JavaScript CodeCopy content to clipboard

When we use the browser to access the page again, we will see the following display effect (the words "CodePlayer" in the effect picture are actually hollow, but because the font is smaller, the two sides appear to overlap):

Draw pictures
In HTML5, in addition to using canvas to draw vector graphics, we can also draw existing image files on the canvas "canvas".

First, let’s take a look at the main properties and methods of the CanvasRenderingContext2D object that are needed to draw image files using canvas:

XML/HTML CodeCopy content to clipboard

1. drawImage(mixed image, int x, int y)

Starting from the specified coordinate point on the canvas, draw the entire image according to the original size of the image. The image here can be an Image object or a Canvas object (the same below).

XML/HTML CodeCopy content to clipboard

1. drawImage(mixed image, int x, int y, int width, int height)

Start from the specified coordinate point on the canvas and draw the entire image with the specified size (width and height). The image will automatically scale accordingly according to the specified size.
drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)
Convert the partial image of the specified image (with (imageX, imageY) as the upper left Corner, width is imageWidth, height is imageHeight) is drawn into the canvas into a rectangular area with (canvasX, canvasY) as the upper left corner coordinates, width is canvasWidth, and height is canvasHeight
Yes, you read that right. To draw an image in canvas, we can use a method called drawImage(), but this method has three different variants. Each method variant allows to receive not only a different number of parameters, but also the meaning of the parameters. same.

Here, we give examples of each of the above three variations.

First, we draw the Google logo image on canvas (original size is 550 x 190) using the first variant of drawImage().

JavaScript CodeCopy content to clipboard

4. "UTF-8">
10. "myCanvas" width="400px" height="300px" style="border: 1px solid red;">
11. Your browser does not support the canvas tag.

The corresponding display effect is as follows:

Because the Google logo image is too large and exceeds the size range of the canvas, only a part of the image can be displayed. At this point, we use the second variation to shrink the Google logo image to the specified width and height and draw it into the canvas.

JavaScript CodeCopy content to clipboard

After we scale the Google logo image, you can now see the entire image in canvas:

Finally, we use the third method variant to draw the "Goo" part of the Google logo into the canvas (the image size of the "Goo" part can be measured using tools such as Photoshop, and the measured size is used directly here. result).

JavaScript Code

Copy content to clipboard

At this point, we can see the "Goo" partial image displayed in the canvas: