绘制SVG内容到Canvas的HTML5应用

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起,让Canvas可享用到现有丰富的SVG素材,并不失SVG矢量无级缩放的特点。

基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果,但你也可以直接拖拽SVG格式的图片进行显示,只不过普通图片的格式数据为data:image/png类型,而SVG格式的数据类型为data:image/svg+xml的类型,下图为该HT for Web拓扑图拖拽入SVG格式图片的运行效果:

以下一段小例子,展示了加载一个SVG图片后,分为七个基本进行缩放绘制的效果,可看出Canvas绘制SVG可保持其矢量不失真的特性

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

提到Canvas和SVG的融合,我们将采用HT for Web的矢量功能展示一个手机电池充电进度的实例,整个手机电池的静态部分我们通过加载一个简单的SVG素材实现,而充电动态变化的部分,我们采用一个渐进色的HT矩形元素来描述,该矩形的长度通过HT矢量数据动态绑定功能,根据充电进度的百分比换算成长度信息,最后通过定时器模拟数据变化达到动态充电的效果:

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

SVG绘制到Canvas还有一种特殊的应用场景,就是将HTML元素通过SVG的foreignObject特性描述在SVG中,然后Canvas绘制SVG时,即可把foreignObject描述的HTML内容绘制到Canvas上,可参见https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas 的实例,其中采用了Blob的方式设置img的src作为URL是比较怪异的技术点,但从上文提到其实我们可以将整个SVG内容转换成data:image/svg+xml;的base64内容即可作为src的url传入,因此我对该例子做了改造,采用btoa(data)把svg内容转换成base64的方式设置img.src,这样方式更容易理解,例子代码和效果如下: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);
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老司机的简书

老司机带你走进Core Animation 之几种动画的简单应用

之所以要写这几种简单应用呢,是为了帮大家扩展一下思维,基于CAAnimation和CADisplayLink其实我们可以做到很多事情,不过我们都还是需要一个思路...

712
来自专栏ATYUN订阅号

【学术】Juggernaut:网络浏览器中的神经网络

Juggernau是一个用Rust编写的实验性神经网络。它是一个使用梯度下降来拟合模型并训练网络的前馈神经网络。Juggernaut使我们能够构建网络应用程序,...

3568
来自专栏学习圈

移动端通用优化方案

手机屏幕帧率一般为60 FPS,也就是说一帧的渲染时间为16.7ms,所以如果页面渲染时间超过16.7ms 容易出现卡顿现象。提高页面渲染效率可以考虑如下方法:

20511
来自专栏图形学与OpenGL

WebGL画点程序v1

本文程序实现画一个点的任务,如下图。其中,点的位置直接给定(“硬编码”)在顶点着色器中。

613
来自专栏微信小开发

小程序“圣诞帽”的实现思路

这两天朋友圈被“圣诞帽”刷屏,这个小程序连微信官方都出来辟谣了,又一个现象级的玩意儿。从产品角度而言无疑是非常成功,但从技术角度而言是确实习以为常,创意很重要!...

21310
来自专栏互联网杂技

如何打造一个高效适配的H5

以往拿到一份视觉稿要做页面适配,通常都是针对不同分辨率尺寸做断点写 media query,然后看效果再微调。开发过程中视觉稿要是做了修改,修改的地方就得再走一...

3105
来自专栏HenCoder

HenCoder Android 自定义 View 1-8 硬件加速

硬件加速这个词每当被提及,很多人都会感兴趣。这个词给大部分人的概念大致有两个:快速、不稳定。对很多人来说,硬件加速似乎是一个只可远观而不可亵玩的高端科技:是,我...

533
来自专栏我就是马云飞

一个精致的打钩小动画

前言 最近在看轻芒杂志的时候,看到一个动画很带感很精致; 恰好这段时间也在看【HenCoder】的自定义view教程(里面写得非常非常详细,也有相应的习题等等)...

1845
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(88)-Excel导入和导出-主从表结构导出

前言 前面一篇详细讲解了导入导出,本节演示混合结构的导出功能!同时提供代码下载.. 先看效果图:这个一个混合的Excel,列表与自定义信息的混合! ?  ...

1937
来自专栏Sorrower的专栏

Android绘制(三):Path结合属性动画, 让图标动起来!

722

扫码关注云+社区