zoukankan      html  css  js  c++  java
  • HTML5 Canvas Overview

     

    This text provides an overview of the HTML5 canvas basic usage. The overview is split into two parts:

    1. Declaring an HTML5 canvas element.
    2. Drawing graphics on the canvas element.

    Declaring a Canvas Element

    First, let's see how to declare a canvas element in an HTML page:

    <canvas id="ex1" width="500" height="150"
               style="border: 1px solid #cccccc;">
        HTML5 Canvas not supported
    </canvas>
    

    The code above declares a single canvas element with width set to 500, height set to 150, and style set to a 1 pixel border with color #cccccc.

    The text inside the canvas element is ignored, if the browser supports the HTML5 canvas element. If the HTML5 canvas element is not supported, the text will probably be displayed as ordinary text by the browser.

    You should put the canvas HTML code in your page at the location where you want the canvas to be visible. Just like any other HTML element (e.g. a div element).

    Drawing Graphics on a Canvas Element

    Graphics drawn on an HTML5 canvas is drawn in immediate mode. Immediate mode means, that as soon as you have drawn a shape on the canvas, the canvas no longer knows anything about that shape. The shape is visible, but you cannot manipulate that shape individually. It is like a real canvas for a painting. Once painted, all you have left is color pigments / pixels.

    This is contrary to SVG, where you can manipulate the shapes individually, and have the whole diagram redrawn. In HTML5 you will have to redraw everything yourself, if you want to change the drawn figure.

    Drawing graphics on an HTML5 canvas element is done using JavaScript, following these steps:

    1. Wait for the page to be fully loaded.
    2. Obtain a reference to the canvas element.
    3. Obtain a 2D context from the canvas element.
    4. Draw graphics using the draw functions of 2D context.

    Here is a simple code example that shows the above steps:

    <script>
    
        // 1. wait for the page to be fully loaded.
        window.onload = function() {
            drawExamples();
        }
    
    
        function drawExamples(){
        
            // 2. Obtain a reference to the canvas element.
            var canvas  = document.getElementById("ex1");
    
            // 3. Obtain a 2D context from the canvas element.
            var context = canvas.getContext("2d");
    
            // 4. Draw graphics.
            context.fillStyle = "#ff0000";
            context.fillRect(10,10, 100,100);
        }
    </script>
    
    

    First, an event listener function is attached to the window. This event listener function is executed when the page is loaded. This function calls another function I have defined, called drawExamples().

    Second, the drawExamples() function obtains a reference to the canvas element usingdocument.getElementById() function, passing the id of the canvas element, as defined in the declaration of the canvas element.

    Third, the drawExamples() function obtains a reference to a 2D context from the canvas element, by callingcanvas.getContext("2d") on the canvas element obtained earlier.

    Fourth, the drawExamples() function calls various drawing functions on the 2D context object, which results in graphics being drawn on the canvas.

    Here is how the code looks when executed:

  • 相关阅读:
    MAC OSX 进程间通信
    UVa 10397 Connect the Campus
    ios 类似的效果淘宝商品详细页面
    Programming from the ground up(0)
    解决因特网和xshell考虑到问题
    除去在阵列中重复元件
    Cocos2d-x 手机游戏《疯狂的蝌蚪》资源 “开源” win32+安德鲁斯+iOS三合一
    (四)左右ng-app自己主动bootstrap相框
    Codeforces 338D GCD Table 中国剩余定理
    十月金在线编程竞赛的第二个冠军:解密
  • 原文地址:https://www.cnblogs.com/hephec/p/4563370.html
Copyright © 2011-2022 走看看