zoukankan      html  css  js  c++  java
  • 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>做的弹球,[点击这里],具体细节还需要更改~

  • 相关阅读:
    8. Automatic Properties(自动属性)
    egg文件安装
    [翻译]深入理解Tornado——一个异步web服务器
    tornado模板的自动编码问题(autoescape )
    PIL的IOError: decoder jpeg not available错误的排除方法
    MongoDB的更新问题
    easy_install
    _imaging.c:75:20: 致命错误: Python.h:没有那个文件或目录
    各类情感的能量等级&大自然与人类能量级别的关系(转)
    python的装饰器(property)
  • 原文地址:https://www.cnblogs.com/linxd/p/4569732.html
Copyright © 2011-2022 走看看