HTML <canvas> 学习笔记

Professional JavaScript for Web Developers P552

Basic Usage

　　The <canvas> element requires at least its width and height attributes to be set in order to indicate the size of the drawing to be created. Any content appearing between the opening and closing tags is fallback data that is displayed only if the <canvas> element isn't supported.

　　To begin with drawing on a canvas, you need to retrieve a drawing context. A reference to a drawing context is retrieved using the getContext() method and passing in the name of the context. For example, passing "2d" retrieves a 2D context object:

1 var drawing = document.getElementById("drawing");
2 
3 // make sure <canvas> is complet supported
4 if (drawing.getContext) {
5     var context = drawing.getContext("2d");
6 }

View Code

　　The coordinates in a 2D context begin at the upper-left of the <canvas> element, which is considered point(0, 0). All coordinate values are calculated in relation to that point. By default, the width and height indicate how many pixels are available in each direction.

Fills and Strokes

　　Fill automatically fills in the shape with a specific style (color, gradient, or image) while stroke colors only the edges. Most of the 2D context operations have both fill and stroke variant, and how they are displayed is based on a couple of properties: fillStyle and strokeStyle.

　　Both properties can be set to a string, a gradient object, or a pattern object. A string value indicates a color defined using one of the various CSS color formats: name, hex code, rgb, rgba, hsl, or hsla.

Drawing Rectangles

　　There are three methods for working with rectangles: fillRect(), strokeRect(), and clearRect(). Each of these methods accepts four arguments: the x-coordinate of the rectangle, the y-coordinate of the rectangle, the width of the rectangle, and the height of the rectangle. Each of these arguments is considered to be in pixels.

　　The fillRect() method is used to draw a rectangle that is filled with a specific color onto the canvas. The fill color is specified using the fillStyle property, for example:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script>
 7         window.onload = function () {
 8             var drawing = document.getElementById("drawing");
 9 
10             // make sure <canvas> is complet supported
11             if (drawing.getContext) {
12                 var context = drawing.getContext("2d");
13 
14                 // draw a red rectangle
15                 context.fillStyle = "#ff0000";
16                 context.fillRect(10, 10, 50, 50);
17 
18                 // draw a blue rectangle that's semi-transparent
19                 context.fillStyle = "rgba(0, 0, 255, 0.5)";
20                 context.fillRect(30, 30, 50, 50);
21             }
22         }
23     </script>
24 </head>
25 <body>
26     <canvas id="drawing" width="200" height="200">A drawing of something.</canvas>
27 </body>
28 </html>

View Code

　　You can earse an area of the canvas by using the clearRect() method. This method is used to make an area of the drawing context transparent. Here is an example:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script>
 7         window.onload = function () {
 8             var drawing = document.getElementById("drawing");
 9 
10             // make sure <canvas> is complet supported
11             if (drawing.getContext) {
12                 var context = drawing.getContext("2d");
13 
14                 // draw a red rectangle
15                 context.fillStyle = "#ff0000";
16                 context.fillRect(10, 10, 50, 50);
17 
18                 // draw a blue rectangle that's semi-transparent
19                 context.fillStyle = "rgba(0, 0, 255, 0.5)";
20                 context.fillRect(30, 30, 50, 50);
21 
22                 // clear a rectangle that overlaps both of the previous rectangles
23                 context.clearRect(40, 40, 10, 10);
24             }
25         }
26     </script>
27 </head>
28 <body>
29     <canvas id="drawing" width="200" height="200">A drawing of something.</canvas>
30 </body>
31 </html>

View Code

Drawing Paths

　　Paths allow you to create complex shapes and lines. To start creating a path, you must first call beginPath() to indicate that a new path has begun. After that, the following methods can be called to create the path:

arc(x, y, radius, startAngle, endAngle, counterclockwise)
arcTo(x1, y1, x2, y2, radius)
lineTo(x, y)
moveTo(x, y)
rect(x, y, width, height)

利用HTML <canvas>做的弹球，[点击这里]，具体细节还需要更改~