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:

 var drawing = document.getElementById("drawing");

 // make sure <canvas> is complet supported

 if (drawing.getContext) {

     var context = drawing.getContext("2d");

 }

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:

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script>

         window.onload = function () {

             var drawing = document.getElementById("drawing");

             // make sure <canvas> is complet supported

             if (drawing.getContext) {

                 var context = drawing.getContext("2d");

                 // draw a red rectangle

                 context.fillStyle = "#ff0000";

                 context.fillRect(10, 10, 50, 50);

                 // draw a blue rectangle that's semi-transparent

                 context.fillStyle = "rgba(0, 0, 255, 0.5)";

                 context.fillRect(30, 30, 50, 50);

             }

         }

     </script>

 </head>

 <body>

     <canvas id="drawing" width="200" height="200">A drawing of something.</canvas>

 </body>

 </html>

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:

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script>

         window.onload = function () {

             var drawing = document.getElementById("drawing");

             // make sure <canvas> is complet supported

             if (drawing.getContext) {

                 var context = drawing.getContext("2d");

                 // draw a red rectangle

                 context.fillStyle = "#ff0000";

                 context.fillRect(10, 10, 50, 50);

                 // draw a blue rectangle that's semi-transparent

                 context.fillStyle = "rgba(0, 0, 255, 0.5)";

                 context.fillRect(30, 30, 50, 50);

                 // clear a rectangle that overlaps both of the previous rectangles

                 context.clearRect(40, 40, 10, 10);

             }

         }

     </script>

 </head>

 <body>

     <canvas id="drawing" width="200" height="200">A drawing of something.</canvas>

 </body>

 </html>

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: