SVG和canvas

1、SVG实现的圆环旋转效果

 参考：http://www.softwhy.com/article-6472-1.html

2、SVG中的图形可以通过  transform="matrix(0,-1,1,0,0,440)"进行旋转。

3、svg代码可以单独放在一个后缀名为 .svg 的文件中保存起来。这个文件就是矢量图片文件。

　  这点用来制作一些矢量图会非常方便，不需要把这个svg代码放在html了（比较乱），可以单独在一个svg文件中。代码逻辑会清晰、干净许多。(占位代替图会经常使用svg制作)

 

 SVG标签学习（SVG标签在W3C中是排在xml中学习的）：   http://www.w3school.com.cn/svg/svg_circle.asp

SVG在线制作编辑预览工具：https://www.bejson.com/ui/svg_editor/

SVG WEB在线编辑器　：　http://www.86y.org/demo/svg/（这个不能把图片保存为svg文件）  或    http://www.zuohaotu.com/svg/（推荐，这个比较完美）

---

canvas

1、canvas标签在使用的时候，内部就会创建一个画图的对象（getContext("2d") 或getContext("3d")）。挂载在这个canvasDOM对象上。

　　js中可以直接获取这个DOM对象对应的画图对象ctx。

2、通过这个ctx对象，描述画什么样的图画。

3、使用stroke() 或者 fill() 方法把ctx描述的图画呈现出来。

　　注：上面的2、3步骤可以合并在一起，步骤2的描述可以作为步骤3（步骤3API的变形）的参数。如，fillText(text,x,y) 或 strokeText(text,x,y)。

　　总结：canvas在js使用分3个步骤：获取canvas标签的DOM对象，从DOM对象中取出画图对象ctx；使用画图对象ctx描述所画的图像；将描述的图像呈现从来。

 　　　　画图对象ctx常用的API：https://www.cnblogs.com/liugang-vip/p/5360283.html

转载于:https://www.cnblogs.com/wfblog/p/9021840.html