Your Search Results

    Basic usage of Canvas

    この記事はまだ日本語に翻訳されていません。MDN の翻訳はボランティアによって行われています。是非 MDN に登録し、私たちの力になって下さい。

    The <canvas> element

    Let's start this tutorial by looking at the <canvas> element itself.

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

    This looks a lot like the <img> element, the only difference is that it doesn't have the src and alt attributes. The <canvas> element has only two attributes - width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size.

    Note: If your renderings seem distorted, try specifying your width and height attributes explicitly in the <canvas> attributes, and not using CSS.

    The id attribute isn't specific to the <canvas> element but is one of the default HTML attributes which can be applied to (almost) every HTML element (like class for instance). It's always a good idea to supply an id because this makes it much easier to identify it in our script.

    The <canvas> element can be styled just like any normal image (margin, border, background, etc). These rules, however, don't affect the actual drawing on the canvas. We'll see how this is done later in this tutorial. When no styling rules are applied to the canvas it will initially be fully transparent.

    Fallback content

    Since some older browsers (in particular, versions of Internet Explorer earlier than version 9) don't support the <canvas> element, you should provide fallback content to be displayed by those browsers.

    This is very straightforward: we just provide alternate content inside the <canvas> element. Browsers which don't support <canvas> will ignore the container and render the fallback content inside it. Browsers which do support <canvas> will ignore the content inside the container, and just render the canvas normally.

    For example, we could provide a text description of the canvas content or provide a static image of the dynamically rendered content. This can look something like this:

    <canvas id="stockGraph" width="150" height="150">
      current stock price: $3.15 +0.15
    </canvas>
    
    <canvas id="clock" width="150" height="150">
      <img src="images/clock.png" width="150" height="150" alt=""/>
    </canvas>
    

    Required </canvas> tag

    Unlike the <img> element, the <canvas> element requires the closing tag (</canvas>).

    Note: Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Those versions of Safari (prior to version 2.0) will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it. Fortunately, users of these versions of Safari are rare nowadays.

    If fallback content is not needed, a simple <canvas id="foo" ...></canvas> is fully compatible with all browsers that support canvas at all.

    The rendering context

    <canvas> creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. We'll focus on the 2D rendering context. Other contexts may provide different types of rendering; for example, WebGL uses a 3D context ("experimental-webgl") based on OpenGL ES.

    The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it. The <canvas> element has a method called getContext(), used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context. For 2D graphics, such as those covered by this tutorial, you specify "2d".

    var canvas = document.getElementById('tutorial');
    var ctx = canvas.getContext('2d');
    

    The first line retrieves the DOM node for the <canvas> element by calling the document.getElementById() method. Once you have the element node, you can access the drawing context using its getContext() method.

    Checking for support

    The fallback content is displayed in browsers which do not support <canvas>. Scripts can also check for support programatically by simply testing for the presence of the getContext() method. Our code snippet from above becomes something like this:

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

    A skeleton template

    Here is a minimalistic template, which we'll be using as a starting point for later examples.

    <html>
      <head>
        <title>Canvas tutorial</title>
        <script type="text/javascript">
          function draw(){
            var canvas = document.getElementById('tutorial');
            if (canvas.getContext){
              var ctx = canvas.getContext('2d');
            }
          }
        </script>
        <style type="text/css">
          canvas { border: 1px solid black; }
        </style>
      </head>
      <body onload="draw();">
        <canvas id="tutorial" width="150" height="150"></canvas>
      </body>
    </html>
    

    The script includes a function called draw(), which is executed once the page finishes loading; this is done by using the load event on the document. This function, or one like it, could also be called using window.setTimeout(), window.setInterval(), or any other event handler, as long as the page has been loaded first.

    Here's what the template looks like in action:

    A simple example

    To begin, let's take a look at a simple example that draws two intersecting rectangles, one of which has alpha transparency. We'll explore how this works in more detail in later examples.

    <html>
     <head>
      <script type="application/javascript">
        function draw() {
          var canvas = document.getElementById("canvas");
          if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
    
            ctx.fillStyle = "rgb(200,0,0)";
            ctx.fillRect (10, 10, 55, 50);
    
            ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            ctx.fillRect (30, 30, 55, 50);
          }
        }
      </script>
     </head>
     <body onload="draw();">
       <canvas id="canvas" width="150" height="150"></canvas>
     </body>
    </html>
    

    This example looks like this:

    ScreenshotLive sample

    添付ファイル

    ファイル サイズ 日時 添付者:
    canvas_ex1.png
    483 バイト 2005-04-19 21:53:08 VladVukicevic

    Document Tags and Contributors

    Contributors to this page: Sheppy, mahmudtamim, ethertank, Jeremie, nickgarvey
    最終更新者: Jeremie,