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); }
相关推荐
html2canvas可以截图指定dom元素,但是dom元素中如果含有svg会导致截图不完整,例如使用jsPlumb流程图,其中连线无法截图,所以结合了canvg可以完整截图
使用js+canvas绘图,结合svg图形,实现标尺栏和网格效果。
Canvas2Svg 该库使用JavaScript将Canvas转换为SVG。 换句话说,该库使您可以使用canvas api构建SVG文档。 为什么要使用它? 您有一个要作为SVG文件保留的画布图形。 您喜欢导出内容。 因为您不想将自定义文件...
HTML5 SVG绘制大树,这个例子的动画效果可以让你感觉到一棵大树的生长过程,树叶慢慢长出来,最后成了一棵茁壮的大树,这是使用的SVG技术,和Canvas相比,SVG似乎更强大。
之前我们利用HTML5技术在Canvas上模拟了很多东西,比如最近刚分享的HTML5 Canvas 多种炫酷3D粒子图形动画。这次给大家带来的也是一款基于HTML5 Canvas的动画特效,它模拟了五彩烟雾的流动效果,这在Canvas上实现还是...
HTML5 canvas SVG绘制的仙桃树和祥云卡通动画效果源码.zip
HTML5 canvas 元素的出现填补了这种不足,开发人员可以使用 JavaScript 脚本语言在 canvas 中进行一系列基于命令的图形绘制操作,本文将通过讲解如何使用 canvas 元素进行基本绘图操作,以及完成简单的动画和用户...
svg转canvas通过google的canvg.js插件转换,这是一个demo,有转换的每一个步奏比如:转换canvas按钮,转换img按钮,还有一个canvas下载按钮,会把canvas绘制的图形下载下来
##根据wx.createSelectorQuery()获取wxml的'color','font-size','font-weight','font-family','backgroundColor','border','border-...##wx.createCanvasContext绘制海报,而不是canvas2d绘制海报,海报高度没限制
Canvas的优势在于允许你在画板上任意绘制图形,SVG的优势在于可以很方便的在网页上...今天分享给大家的就是一款基于HTML5 Canvas和SVG的五彩万花筒动画,五彩斑斓的彩色路径将会不停的变换形状和颜色,效果非常炫酷。
html5 canvas天空乌云密布下雨动画特效,html5 canvas结合svg绘制的阴暗天空乌云密布暴雨动画场景。
html2canvas - 使用JavaScript将整个网页或一部分区域截取成图片并导出
printed提供直接图形上下文 API,用于在多页 PDF、HTML 或 SVG 中绘制矢量内容。它旨在提供准系统 API,并且需要在其之上的文本感知 API。 它的 API 类似于 HTML5 Canvas 2D API。 最终目标是用它生成技术文档或用户...
HTML5 Canvas技术已经不是什么新鲜的东西了,在canvas上我们不仅可以结合SVG来绘制各种路径动画,而且更出色的地方在于我们可以结合JavaScript生成很多炫酷的3D动画效果。这次我们给大家分享一款基于HTML5 Canvas的...
Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的。 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText()方法也是立即绘制的,但是文本不算是图形。 基于路径的绘制...
svg 画笔使用类似 Photoshop 的画笔在 Canvas 上绘制 SVG 路径(:construction:正在施工:construction:)
html5 canvas画布基于svg绘制的人物在山坡上看着夜空中星星流星动画场景特效。
资源包括html这种的table和生成的两种方式,一种的是div,一种是table,这两个的效率对比,其次是在H5中的Canvas中的各种图形绘制,包括矩形,各种填充
本文适合适合对canvas绘制、图形学、前端可视化感兴趣的读者阅读。 楔子 所有的事情都会有一个起因。 最近产品上需要做一个这样的功能:给一些图形进行染色处理。想想这还不是顺手拈来的事情,早就研究过图形染色的...
我所考虑的有两个方向,一是类似于Highcharts等插件的实现方式 — svg,一是HTML5的canvas。 SVG 是一种使用 XML 描述 2D 图形的语言。 Canvas 通过 JavaScript 来绘制 2D 图形。 Canvas 是逐像素进行渲染的。 ...