关于html中canvas使用svg的问题

      window.onload = function () {

          var ctx = document.getElementById("canvas").getContext('2d')

 兄森         var svg_xml 侍尘迅= (new XMLSerializer()).serializeToString(document.getElementById("svg")) 

          var img = new Image()

      老此    img.src = "data:image/svg+xmlbase64," + window.btoa(svg_xml)

          img.onload = function () {

              ctx.drawImage(img, 0, 0)

          }

      }

ctx和svg_xml分别为canvas和svg对象；最后采取base64方式

微信小程序里的canvas 非 h5 canvas有很多不一样的地方，以下把微信小程序的canvas叫做wxcanvas

下面全是我一点点测试出的干货，耐心看：

1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式。他只有style样式，可以理解为他就是个框吧；

2.wxcanvas不要当成真的H5canvas，就当它是个div就行，画出范围的东西也是存在的，改变width,height就显示出来了，或者说这里有重绘，但具体如何实现的不知道；

3.改变wxcanvas的style的width,height，并不改为原画布上的东西的大小；

4.css transform变换中的变大缩小也无法改变原画布上的东西大小

5.官方说法：context只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于皮斗多个<canvas/>。

实际上，context.getActions()后，context中的信息会被清空，如果想重复利用，需要var temp=context.getActions()将 *** 作数组保存下来，才可重复用于wx.drawcanvas；

6.注意

wx.drawCanvas({canvasId: 'target',actions: context.getActions()})

默认会清空备滚画布，想不清空需要

wx.drawCanvas({ canvasId: 'target', actions: context.getActions(), reserve:true})

7.《重点》

<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas-id="target" id="target" style='width:{{width}}pxheight:{{height}}px'></canvas>

注意，disable-scroll="true"和bindtouchmove="cvsMove"同时存在时才能避免页面跟着动，catchtouchmove是不行的

上面的写法，ccvsMove和cvsMove会都触发，

ccvsMove返回的是普通touch事件对象，有pageX,clientX等，

cvsMove返回的是canvasTouch事件对象，没燃滚磨有pageX,clientX,只有x,y

8.

wx.drawCanvas({ canvasId: 'target', actions: [], reserve:false})

可以清空画布和画布的状态

9.画布的scale tranlate rotate等状态，在reserve:true时会接着上次的状态

10. context.getActions()返回的数组很有用，打印出来你会发现里面的内容你都能看懂，可以直接修改数组改变画的动作

11.wx.drawCanvas时context.drawImage在手机上可以画出来，在电脑开发工具上画不出来

12.wx.canvasToTempFilePath

官方文档中只有一行，原来

wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete，和wx.saveFile差不多；wx.canvasToTempFilePath({ canvasId: 'target', success: function success(res) { wx.saveFile({ tempFilePath: res.tempFilePath, success: function success(res) {console.log('saved::' + res.savedFilePath) }, complete: function fail(e) {console.log(e.errMsg) } })}, complete: function complete(e) { console.log(e.errMsg)}})

栅格图形 ，也叫做点阵图，位图(bitmap)，像素图，图像是由像素构成的，像素的多少将决定图像的显示质量和文件大小，图像的分辨率越高，其显示越清晰，文件所占的空间也就越大。图像放大时会失真，可以看到整个图像是由很多像素组合而成的。

矢量图形 使用 XML 来描述二维图形和绘图程序，矢量图像在放大或改变尺寸的情况下其图形质量不会有所损失。

<canvas>和<svg>都是HTML5推荐使用的图形技术，Canvas基于像素，提供2D绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本绘制图形；SVG为矢量，提供一系列图形元素（Rect, Path, Circle, Line …），还有完整的动画，事件机制，本身就能独立使用，也可以嵌入到HTML中，SVG很早就成为了国际标准，目前的稳定版本是1.1 – Scalable Vector Graphics (SVG) 1.1 (Second Edition) ，两者的主要特点见下面的表格：

SVG

Canvas

图形和图表

svg和Canvas都可以表现图表(如柱状图, 散点图, 饼图等等)，常用的图形图表库中，百度的echarts是基于Canvas实现的，D3是基于svg实现的。

xmlns属性可定义SVG 命名空间（如果将SVG内嵌在HTML页面中并作为该页面提供，则不需要xmlns属性）。

使用棚信 <g>元素，可以对多个元素进行分组

path元素是SVG基本形状中功能最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等。

path元素的形状是通过属性d来定义的，属性d的值是一个“命令+参数”的序列。

下面的命令可用于路径数据：（命令详情可查看 https://segmentfault.com/a/1190000005053782 ）

viewBox的四个参数分别代表：最小X轴数值；最小y轴数值；宽度；袭扮高度。

用于svg整体缩放

表示虚线描边。可选值为：none, <dasharray>, inherit. 其中，none表示不是虚线；<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线段的长度。可以是固定的长度值，也可以是百分比值；inherit表继承。

表示虚线的起始偏移。可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承。

如果stroke-dasharray值很大，超过了描边路径的总长度拍和灶，加以css动画改变stroke-dashoffset值，就会出现一段时间内描边显示从无到有。

---