文档章节

绘制SVG内容到Canvas的HTML5应用

xhload3d
 xhload3d
发布于 2015/02/01 15:13
字数 964
阅读 4626
收藏 12

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格式图片的运行效果:

Screen Shot 2015-02-01 at 2.20.40 PM

以下一段小例子,展示了加载一个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;
        }            
    };
}

Screen Shot 2015-02-01 at 2.21.39 PM

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

Screen Shot 2015-02-01 at 2.21.21 PM

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

Screen Shot 2015-02-01 at 2.21.56 PM

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


© 著作权归作者所有

xhload3d
粉丝 187
博文 164
码字总数 341461
作品 0
崇明
私信 提问
Web 开发中的矢量绘图处理和应用

矢量绘图一直是 Web 开发中一直比较薄弱的环节。本文首先针对不同浏览器详细阐述不同的矢量绘图解决方案,其中包括 HTML5 Canvas、SVG 以及 VML 等技术;之后针对每种不同的技术介绍其实现和...

IBMdW
2011/09/03
1K
0
Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 ...

kevin_pang
2014/02/25
0
0
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0
23 款非常有用的 HTML5 工具

HTML5 工具其强大的功能,可以协助 Web 开发人员和设计师完成很多工作。例如可以让网站管理员把图片、视频、音频、动画、字体在网页上进行拖拉摆放。另外一个就是兼容旧的HTML/HTML4网站设计...

oschina
2013/05/17
11K
18
HTML5 中 40 个最重要的技术点

介绍 我是一个ASP.NET MVC的开发者,最近在我找工作的时候被问到很多与HTML5相关的问题和新特性。所以以下40个重要的问题将帮助你复习HTML5相关的知识。 这些问题不是你得到工作的高效解决方...

oschina
2014/10/18
14.3K
18

没有更多内容

加载失败,请刷新页面

加载更多

怎么选择数据服务器?请记住这五条

我们应当都知道“数据无价”这个词,既然数据那么主要,选择一款安全稳定的数据服务器是很有必要的,那么如何选择一款牢靠的,稳定的数据服务器呢?我们从五个方面下手,协助您体系的了解数据...

linux-tao
5分钟前
0
0
第一讲:编写TCP Socket小程序

根据下面的步骤编写TCP Socket小程序。注意:作者必须是自己的名字。结果如下: 步骤: 1、用VC建立服务器程序 创建一个win32控制台程序 上面的代码如下,编写代码的时候切换到FileView界面,...

一匹狼工作室
7分钟前
0
0
python-protobuf2uml

首先这篇文章是参考的https://github.com/vak/protobuf2uml 本篇文章都是基于python3的 下面首先我们说一下python3的安装 wget https://github.com/protocolbuffers/protobuf/releases/down...

yiduwangkai
9分钟前
0
0
mysql通过source恢复大表小计

最近迁移一个数据库,500多张表大概600多万条数据,通过navicat导出的数据,再通过source命令导入到mysql8.0 之前也做过类似的工作,但是却从来没有这么慢过,一个小时了还没有完成,之前在笔...

休辞醉倒
9分钟前
0
0
Java、Python、C++、PHP、JavaScript这5大编程语言,我究竟该选哪个?

很多朋友在后台给我留言,问:现在这么多编程语言,Python、Java、PHP、C++、JavaScript等,究竟哪种最流行?我想这应该也是你的困扰吧! 其实他们各有优势,但是对于选择困难的程序员而言,...

Java领航员
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部