Learning HTML5 Canvas: This One Article Is Enough

1. Introduction to Canvas

<canvas>YesHTML5Newly added, one that can use scripts (usuallyJavaScript) to draw images inHTMLelement.

It was initially by Apple internally using its ownMacOS X WebKitlaunched, for applications to use components like Dashboard andSafaribrowser use. Later, someone throughGeckokernel browsers (especiallyMozillaandFirefox)，OperaandChromeand the Web Hypertext Application Technology Working Group suggested using this element for next-generation web technologies.

CanvasisHTMLa drawable area defined by code together with the height and width attributes.JavaScriptCode can access this area, similar to other generic two-dimensionalAPI, through a complete set of drawing functions to dynamically generate graphics.

Mozilla programs have supported it since Gecko 1.8 (Firefox 1.5)<canvas>, Internet Explorer from IE9<canvas>. Chrome and Opera 9+ also support<canvas>。

2. Basic Usage of Canvas

<canvas id="tutorial" width="300" height="300"></canvas>

2.1 `<canvas>`Element

<canvas>looks the same as<img>the tag, except that<canvas>has only two optional attributeswidth、heigthattributes, and nosrc、altattributes.

If you do not<canvas>setwidht、heightthe attributes, then by defaultwidthis 300,heightis 150, and the units are allpx. You can also usecssattributes to set width and height, but if the width and height attributes are inconsistent with the initial ratio, it will appear distorted. Therefore, it is recommended to never usecssattributes to set<canvas>the width and height.

Replacement Content

Because some older browsers (especially IE browsers before IE9) or browsers do not support the HTML element<canvas>, on these browsers you should always be able to display replacement content.

Supporting<canvas>browsers will only render<canvas>the tag, and ignore the replacement content inside. Browsers that do not support<canvas>will directly render the replacement content.

Replace with text:

<canvas>
    你的浏览器不支持 canvas，请升级你的浏览器。
</canvas>

use<img>Replacement:

<canvas>
    <img src="./美女.jpg.html" alt=""> 
</canvas>

The closing tag</canvas>cannot be omitted.

and<img>Unlike the element,<canvas>the element needs a closing tag (</canvas>). If the closing tag does not exist, the rest of the document will be considered replacement content and will not be displayed.

2.2 Rendering Context (The Rendering Context)

<canvas>will create a fixed-size canvas and expose one or morerendering contexts(brush), to userendering contextto draw and process the content to be displayed.

We focus on the 2D rendering context. We will not study other contexts for now. For example, WebGL uses a 3D context based on OpenGL ES ("experimental-webgl").

var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');

2.3 Checking Support

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

2.4 Code Template

Example

Try it now »

2.5 A Simple Example

The following example draws two rectangles:

Example

<canvas id="tutorial" width="300" height="300"></canvas> <script type="text/javascript">function draw(){ var canvas = document.getElementById('tutorial'); if(!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; //绘system矩形 ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } draw();</script>

Try it now »

3. Drawing Shapes

3.1 Grid`(grid)`and coordinate space

As shown in the figure below,canvasthe element is covered by a grid by default. Generally speaking, a unit in the grid is equivalent tocanvasa pixel in the element. The origin of the grid is the top-left corner, with coordinates (0,0). The position of all elements is positioned relative to the origin. Therefore, the top-left corner of the blue square in the figure has coordinates (x, y), which is x pixels from the left (X-axis) and y pixels from the top (Y-axis).

Later we will cover the translation of the coordinate origin, rotation of the grid, and scaling, etc.

3.2 Drawing Rectangles

<canvas>Only one kind of native graphics drawing is supported:Rectangle. All other graphics require generating at least one path (path). However, we have many path generation methods that make it possible to draw complex graphics.

canvas provides three methods for drawing rectangles:

1、fillRect(x, y, width, height): Draw a filled rectangle.
2、strokeRect(x, y, width, height): Draw the border of a rectangle.
3、clearRect(x, y, widh, height): Clear the specified rectangular area, and then this area will become completely transparent.

Explanation:These 3 methods have the same parameters.

x, y: Refers to the coordinates of the top-left corner of the rectangle. (Relative to the canvas coordinate origin)
width, height: Refers to the width and height of the rectangle to be drawn.

function draw(){ var canvas = document.getElementById('tutorial'); if(!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillRect(10, 10, 100, 50); //Drawing a rectangle, the default fill color is black ctx.strokeRect(10, 70, 100, 50); //Drawing a rectangle border } draw();

ctx.clearRect(15, 15, 50, 25);

4. Drawing Paths (`path`)

The basic element of graphics is a path.

A path is a collection of points of different shapes formed by connecting line segments or curves of different colors and widths.

A path, or even a subpath, is closed.

Using paths to draw graphics requires some additional steps:

Create the starting point of the path
Call drawing methods to draw the path
Close the path
Once the path is generated, render the graphics by stroking or filling the path area.

The following are the methods needed:

beginPath()

Create a new path. Once the path is created successfully, the graphics drawing commands are directed to the path to generate the path.
moveTo(x, y)

Move the pen to the specified coordinates.(x, y)Equivalent to setting the starting point coordinates of the path.
closePath()

After closing the path, the graphics drawing commands are redirected to the context.
stroke()

Draw the shape outline with lines.
fill()

Generate a solid shape by filling the content area of the path.

4.1 Drawing Line Segments

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); //Create a new path. ctx.moveTo(50, 50); //Move the pen to the specified coordinates. ctx.lineTo(200, 50); //Draw a straight line from the current position to the specified coordinates (200, 50). //Close the path. It will draw a straight line from the current point to the starting point of the path. If the current point coincides with the starting point, nothing is done. ctx.closePath(); ctx.stroke(); //Draw the path. } draw();

4.2 Drawing a Triangle Border

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(200, 50); ctx.lineTo(200, 200); ctx.closePath(); //Although we only drew two line segments, closePath will close the path, and it is still a triangle. ctx.stroke(); //Stroke. stroke() will not automatically closePath(). } draw();

4.3 Filling a Triangle

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(200, 50); ctx.lineTo(200, 200); ctx.fill(); //Fill the closed area. If the path is not closed, fill() will automatically close the path. } draw();

4.4 Drawing Arcs

There are two methods to draw arcs:

1、arc(x, y, r, startAngle, endAngle, anticlockwise): with(x, y)as the center, withras the radius, fromstartAngleradians start toendAngleradians end.anticlosewiseis a boolean value,trueindicates counterclockwise,falseindicates clockwise (default is clockwise).

Note:

The degrees here are all in radians.

0Radians refer to thexpositive direction of the axis.

radians=(Math.PI/180)*degrees   //角度转换成弧度

2、arcTo(x1, y1, x2, y2, radius): Draw an arc based on the given control points and radius, and finally connect the two control points with a straight line.

Arc Example 1

Arc Example 2

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(50, 50, 40, 0, Math.PI / 2, false); ctx.stroke(); ctx.beginPath(); ctx.arc(150, 50, 40, 0, -Math.PI / 2, true); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false); ctx.fill(); ctx.beginPath(); ctx.arc(150, 150, 40, 0, Math.PI, false); ctx.fill(); } draw();

Arc Example 3

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); //Parameters 1 and 2: coordinates of control point 1; Parameters 3 and 4: coordinates of control point 2; Parameter 4: arc radius ctx.arcTo(200, 50, 200, 200, 100); ctx.lineTo(200, 200) ctx.stroke(); ctx.beginPath(); ctx.rect(50, 50, 10, 10); ctx.rect(200, 50, 10, 10) ctx.rect(200, 200, 10, 10) ctx.fill() } draw();

arcToMethod description:

This method can be understood as follows. The arc to be drawn is determined by two tangent lines.

The first tangent line: the straight line determined by the starting point and control point 1.

The second tangent line: the straight line determined by control point 1 and control point 2.

In fact, the arc drawn is the arc tangent to these two straight lines.

4.5 Drawing Bezier Curves

4.5.1 What is a Bézier curve

A Bézier curve, also known as Bezier curve, is a mathematical curve applied in two-dimensional graphics applications.

General vector graphics software uses it to accurately draw curves. A Bezier curve consists of line segments and nodes. The nodes are draggable fulcrums, and the line segments are like stretchable rubber bands. The pen tool we see in drawing tools is used to create such vector curves.

Bézier curves are quite important parametric curves in computer graphics. Some mature bitmap software also has Bézier curve tools, such as PhotoShop. In Flash4 there was no complete curve tool, but Flash5 already provided a Bézier curve tool.

The Bézier curve was widely published in 1962 by French engineer Pierre Bézier, who used it to design automobile bodies. The Bézier curve was originally developed by Paul de Casteljau in 1959 using the de Casteljau algorithm, a numerically stable method for finding Bézier curves.

A first-order Bézier curve is actually a straight line.

Quadratic Bézier curve

Cubic Bézier curve

4.5.2 Drawing Bézier curves

Draw a quadratic Bézier curve:

quadraticCurveTo(cp1x, cp1y, x, y)

Description:

Parameters 1 and 2: control point coordinates
Parameters 3 and 4: end point coordinates

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(10, 200); //Starting point var cp1x = 40, cp1y = 100; //Control point var x = 200, y = 200; //End point //Draw a quadratic Bézier curve ctx.quadraticCurveTo(cp1x, cp1y, x, y); ctx.stroke(); ctx.beginPath(); ctx.rect(10, 200, 10, 10); ctx.rect(cp1x, cp1y, 10, 10); ctx.rect(x, y, 10, 10); ctx.fill(); } draw();

Draw a cubic Bézier curve:

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Description:

Parameters 1 and 2: coordinates of control point 1
Parameters 3 and 4: coordinates of control point 2
Parameters 5 and 6: coordinates of the end point

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(40, 200); //Starting point var cp1x = 20, cp1y = 100; //Control point 1 var cp2x = 100, cp2y = 120; //Control point 2 var x = 200, y = 200; //End point //Draw a quadratic Bézier curve ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); ctx.stroke(); ctx.beginPath(); ctx.rect(40, 200, 10, 10); ctx.rect(cp1x, cp1y, 10, 10); ctx.rect(cp2x, cp2y, 10, 10); ctx.rect(x, y, 10, 10); ctx.fill(); } draw();

5. Adding Styles and Colors

In the previous chapter on drawing rectangles, only the default lines and colors were used.

If you want to color a shape, there are two important properties that can do it.

fillStyle = colorSet the fill color of the shape.
strokeStyle = colorSet the color of the shape outline.

Notes:

1. color can be a string representing a CSS color value, a gradient object, or a pattern object.
2. By default, the line and fill colors are both black.
3. Once you set the value of strokeStyle or fillStyle, this new value becomes the default for newly drawn shapes. If you want to give each shape a different color, you need to reset the value of fillStyle or strokeStyle.

fillStyle

strokeStyle

Transparency

globalAlpha = transparencyValue: This property affects the transparency of all shapes in the canvas. Valid values range from 0.0 (fully transparent) to 1.0 (fully opaque), default is 1.0.

globalAlphaThis property is quite efficient when you need to draw many shapes with the same transparency. However, I think using rgba() to set transparency is better.

1、line style

Line width. It can only be a positive value. Default is 1.0.

The line connecting the start point and end point is the center,The top and bottom each occupy half of the line width.。

ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(100, 10); ctx.lineWidth = 10; ctx.stroke(); ctx.beginPath(); ctx.moveTo(110, 10); ctx.lineTo(160, 10) ctx.lineWidth = 20; ctx.stroke()

2. lineCap = type

Line cap style.

There are 3 values:

butt: The end of the line segment ends with a square.
round: The end of the line segment ends with a circle.
square: The end of the line segment ends with a square, but a rectangular area is added whose width is the same as the line segment and whose height is half the line thickness.

var lineCaps = ["butt", "round", "square"]; for (var i = 0; i < 3; i++){ ctx.beginPath(); ctx.moveTo(20 + 30 * i, 30); ctx.lineTo(20 + 30 * i, 100); ctx.lineWidth = 20; ctx.lineCap = lineCaps[i]; ctx.stroke(); } ctx.beginPath(); ctx.moveTo(0, 30); ctx.lineTo(300, 30); ctx.moveTo(0, 100); ctx.lineTo(300, 100) ctx.strokeStyle = "red"; ctx.lineWidth = 1; ctx.stroke();

3. lineJoin = type

Within the same path, set the style of the joints between lines.

There are 3 values.round, bevelandmiter：
1. roundDraw the shape of the corner by filling an additional sector whose center is at the end of the connected part. The radius of the rounded corner is the width of the line segment.
2. bevelFill an additional triangular-based area at the end of the connected part; each part has its own independent rectangular corner.
3. miter(Default) Extend the outer edges of the connected parts so that they intersect at a point, forming an additional diamond-shaped area.
  
  function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); var lineJoin = ['round', 'bevel', 'miter']; ctx.lineWidth = 20; for (var i = 0; i < lineJoin.length; i++){ ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(50, 50 + i * 50); ctx.lineTo(100, 100 + i * 50); ctx.lineTo(150, 50 + i * 50); ctx.lineTo(200, 100 + i * 50); ctx.lineTo(250, 50 + i * 50); ctx.stroke(); } } draw();