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

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;
        }            
    };
}
昵    称:
验证码:

相关文档:

  • html5+js压缩图片上传
    最近在折腾移动站的开发,涉及到了一个手机里面上传图片。于是经过N久的折腾,找到一个插件,用法如下: 1...
  • 基于html5制作3D拳击游戏源码下载
    今天给大家分享一款基于HTML5实现的3d拳王游戏源码。这款实例适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.不支...
  • 15 Best Responsive HTML5 Frameworks 2014
    ...
  • 浅析天猫H5站点
    前言 我们做前端开发的时候,很有可能会做一个竞品分析,比如我就做过去哪儿、艺龙、同程等与携程的移动站点竞品分析,竞品分析...
  • 寡人写的第一个HTML5页面
    好吧,其实是抄来的 <!DOCTYPEHTML> <html> <head> <metacharset="utf-8"/> <title>HTML5本地存储之本地数据库篇</title> <style...
  • 分享php中四种webservice实现的简单架构方法及实例
    一:PHP本身的SOAP所有的webservice都包括服务端(server)和客户端(client)。要使用php本身的soap首先要把该拓展安装好并且启用。下面看具...
  • html5自定义标签选择器
    *E[attr]:只使用属性名,但没有确定任何属性值 *E[attr="value"]:指定属性名,并指定了该属性的属性值。必须和元素的属性完全匹配 *E[attr...
  • 转载 遇到过的一些php笔试题
    遇到过的一些php笔试题 1、linux的多线程和多进程有什么区别?什么时候使用多线程,什么时候使用多进程? 答:(1)进程资源调度的最...
  • HTML5 获取地理位置信息
    GeolocationAPI的基本知识 在HTML5中,为window.navigator对象新增了一个geolocation属性,可以使用GeolocationAPI来对该属性进行访问。window.navigator对...
  • 常用的 HTML 头部标签
    曾几何时,我们已经不再手写HTML标签。Emmet、Markdown等工具让我们「健步如飞」,但是我们真的了解这些标签了吗? 基本标签 使用HTML5doc...
  • [html5/css3] html5 拖放API
    <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>html5拖放API</title> <scripttype="text/javascript">...
  • html5匹配不同分辨率样式
    .abc{height:300px;border:1pxsolid#000;margin:0auto} @mediascreenand(min-width:1201px){ .abc{width:1200px} } /*设置了浏览器宽度不小于1201px时abc显示1200px宽度*/ @med...
  • html5 在移动端的缩放控制
    viewport语法介绍: 01 <!--htmldocument-->...
  • HTML5系列之——applicationCache对象
    ApplicationCache主要简单介绍: applicationCache对象实现HTML5相应WEB离线功能。以下我们来主要解说applicationCache对象的一些主要功能和方法 appl...
  • JQuery实现密码有短暂的显示过程和实现 input hint效果
    目录: 一、实现目的 二、问题思考 三、解决办法 1、输入用户名 2、输入密码短暂显示 一、实现目的 这几天做项目的时候,客户...
  • web开发的基础知识:http请求
    引用自:http://blog.csdn.net/yefan2222/article/details/6198098 http://baike.baidu.com/view/1628025.htm?fromtitle=http&fromid=243074&type=syn 1.HT...
  • 大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)
    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*)嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点...
  • <!DOCTYPE html>的重要性
    在HTML5时代,DOCTYPE声明已经不再像以前HTML4那样繁琐了,只需要简简单单的<!DOCTYPEhtml>,这句话指示 web浏览器关于页面使用哪个HTML版...
  • 10款很酷的HTML5动画和实用应用 有源码
    10款很酷的HTML5动画和实用应用,这里有菜单、SVG动画、Loading动画,总有你喜欢的,而且,每一款HTML5应用都提供源代码下载,方便大家...
  • HTML5新 增一些特性
    HTML5新增一些特性:1.用于绘画的canvas元素2.用于媒介回放的video和audio元素3.对本地离线存储的更好的支持4.新的特殊内容元素,比如article...