HTML5 applications that draw SVG content to Canvas-

Source: Internet
Author: User
SVG and Canvas are two completely different ways of drawing graphics applications on HTML5. Each of them has its own advantages and disadvantages, but they are not difficult to draw, in particular, the SVG content can be directly drawn on the Canvas, so that the two can be perfectly integrated, so that the Canvas can enjoy the existing rich ...,. SVG and Canvas are two completely different ways of drawing graphics applications on HTML5. Each of them has its own advantages and disadvantages, but they are not difficult to draw, in particular, the SVG content can be directly drawn on the Canvas, so that the two can be perfectly integrated, so that the Canvas can use a wide range of existing SVG materials, without losing the SVG vector stepless scaling feature.


Although HTML5-based Drag and Drop generates Base64 information for images, this article shows how to Drag and Drop common raster images, you can also directly Drag and Drop images in SVG format for display, however, the format data of common images is data: image/png, while that of SVG is data: image/svg + xml, drag the image in SVG format to the HT for Web topology:



The following is a small example of how to load an SVG image, which is divided into seven basic scaling effects. It can be seen that drawing SVG on Canvas can keep its vectors intact.

function draw(){    var img = new Image();    img.src = 'chart.svg';    document.body.appendChild(img);    img.onload = function(){        var canvas = document.getElementById('canvas');        var g = canvas.getContext('2d');         var width = img.clientWidth * 1.5;        var height = img.clientHeight * 1.5;                        var x = 2;        var y = 2;        for(var i=0; i<7; i++){            g.drawImage(img, x, y, width, height);            x += width + 2;            width /= 2;            height /= 2;        }                };}


ht.Default.setImage('battery', {      width: 64,      height: 64,      comps: [             {              type: 'rect',              rect: {                  func: function(data){                      return [5, 25, 50*data.a('percent'), 16]                  }              },              background: 'red',              gradient: 'spread.vertical'          },                                  {              type: 'image',              name: 'battery.svg',              relative: true,              rect: [0, 0, 1, 1]          }      ]  });                   var node = new ht.Node();  node.setPosition(80, 150);  node.setImage('battery');  node.s('image.stretch', 'uniform');  node.a('percent', 0);  dataModel.add(node);       graphView.setEditable(true);    setInterval(function(){      percent = node.a('percent') + 0.02;      if(percent > 1){          percent = 0;      }      node.a('percent', percent);  }, 16);

Another special application scenario is to describe HTML elements in SVG by using the foreignObject feature of SVG. When SVG is drawn, you can draw the HTML content described by foreignObject to the Canvas. For more information, see the https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas instance. It is a strange technical point to set img src as URL in Blob mode, however, as mentioned above, we can convert the whole SVG content to the base64 content of data: image/svg + xml; and then pass in the content as the src url. Therefore, I have modified this example, use btoa (data) to convert svg content to base64 to set img. src, which is easier to understand, the sample code and effects are as follows: http://v.youku.com/v_show/id_XODg0MTU4NjEy.html

function draw(){      var canvas = document.getElementById('canvas');      var ctx = canvas.getContext('2d');      var data = 。。。;      var img = new Image();      img.onload = function () {          ctx.drawImage(img, 0, 0);      };                  img.src = 'data:image/svg+xml;base64,' + btoa(data);  }

The above is the HTML5 app that draws SVG content to Canvas. For more information, see PHP Chinese website (www.php1.cn )!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.