HTML5 applications that draw SVG content to Canvas-

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 )!