HTML5 applications that draw SVG content to Canvas, svghtml5

HTML5 applications that draw SVG content to Canvas, svghtml5

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;        }                };}

When it comes to the combination of Canvas and SVG, we will use the HT for Web vector function to show an instance of the battery charging progress of a mobile phone, the static part of the entire cell phone battery is realized by loading a simple SVG material, while the dynamic part of the charging is described by a progressive HT rectangular element, the length of the rectangle is converted to the length information based on the percentage of the charging progress by using the dynamic binding function of HT vector data. Finally, the dynamic charging effect is achieved by simulating data changes through the Timer:

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);}