分類彙整: HTML5

SVG and Canvas

Reference

[1] http://www.sitepoint.com/canvas-vs-svg-how-to-choose/


Below is the HTML5 code with SVG and Canvas:

<!DOCTYPE html>
<html>
  <!--
  Source:
http://msdn.microsoft.com/en-us/library/gg589494(v=VS.85).aspx
  -->

  <script type="text/javascript">
    //This function is called on page load.
    function drawOnCanvas()
    {
        // Get the canvas element
        var canvas = document.getElementById("uIElementJS");
        // Make sure you got it before doing anything.
        if (canvas.getContext)
        {
            // Specify 2d canvas type.
            var ctx = canvas.getContext("2d");
            // Draw gold UI element.
            // Start the path.
            // Define the fill color in RGB for gold.
            ctx.fillStyle = "rgb(255, 215, 0)";
            // Draw the circle using an arc.
            ctx.arc(100, 100, 50, 0, 2*Math.PI, true);
            //Fill the circle.
            ctx.fill();
        }
    }
    // Call when you click on the canvas
    function clickOnUI()
    {
        alert("You clicked the canvas UI element.");
    }
    function clickOnSVG()
    {
        alert("You clicked the SVG UI element.");
    }
  </script>
</head> 

<body onload="drawOnCanvas()">
    <h1>
      Canvas User Interface
    </h1>
    <!-- Create the Canvas element. -->
    <canvas id="uIElementJS" width="200" height="200" onclick="clickOnUI()">
    </canvas>
    <p>
      Click on the gold circular user interface element.
    </p>
    <h1>
      SVG User Interface
    </h1>
    <!-- Create the SVG pane. -->
    <svg height="200" width="200">
      <!-- Create the circle. -->
      <circle cx="100" cy="100" r="50" fill="gold" id="uIElementSVG" onclick="clickOnSVG();"
      />
    </svg>
    <p>
      Click on the gold circular user interface element.
    </p>
    <p>
      When should I use Canvas and SVG?
    </p>
  </body>

</html>

 

We can see that SVG can draw the circle without caring the drawing procedure.

It's time to use…

If the graphic is SVG Canvas
static (e.g. draw once) **** *
geometric shape **** *
irregular shape ** ***
interactive (e.g. in animation) **** **
transformation-required **** ***
needed to be downloaded quickly ***** ***
cross-browser * (with the help of plugin) **** (with the help of libraries)
pixel-based (e.g. image processing) * ****

 

The more the number if stars (*), the higher the preference.

SVG and Canvas

Adopt from

[1] https://www.svgopen.org/2009/papers/54-SVG_vs_Canvas_on_Trivial_Drawing_Application/

[2] http://msdn.microsoft.com/en-us/library/gg589488(v=VS.85).aspx

[3] http://en.wikipedia.org/wiki/Retained_mode


Introduction

SVG's retained mode graphic display system allows you to create all the map details in HTML-like tags in the body and modify them in script by changing shape attributes. [2] By using a "retained mode" approach, client calls do not directly cause actual rendering, but instead update an internal model (typically a list of objects) which is maintained within the library's data space. This allows the library to optimize when actual rendering takes place along with the processing of related objects. [3] It is supported since IE9.

Canvas requires more code to accomplish the same task, because the shapes must be drawn in script and the body only contains the basic Canvas tag. [2] It is supported by most of the browsers.

SVG is strong and robust with built-in shape handling, while Canvas is fast and efficient for pixel manipulation. [1]

Both standards allow accessing their data through JavaScript, but there are no shared interfaces to utilize co-operation. SVG gives its data as (serialized) XML, while Canvas as base64-coded PNG. [1]

Combining two techniques [1]

Canvas to SVG

  1. Including Canvas as foreignObject into SVG
  2. Import Canvas bitmap data as image element into SVG using Canvas.toDataURL

SVG to Canvas

  1. Implement full SVG parsing (e.g. CakeJS)
  2. Render in Canvas or do SVG conversion to bitmap server-side (e.g. ImageMagick, Batik or Inkscape)