1、关于Canvas绘制图像：
问题：需要绘制多张图片时，必须等待所有图片加载完成才能开始绘制；而每张图片都是异步请求，彼此没有先后顺序，哪一张先加载完成完全无法预测；
方案：
var progress=0;//全局加载进度
var img=new Image();
img.src='xx.jpg';
img.onload=function(){
progress+=10;//该图片权重
if(progress===100){
startDraw();
}
}
2、关于Canvas中某个图形/图像添加事件监听：
问题：HTML中，只有标签/元素才能添加事件监听，而Canvas绘图只有一个标签——Canvas；
方案：若要为Canvas中某个图形/图像添加事件监听，可委托给Canvas，获取事件发生坐标，然后判断是否处于目标图像/图形内；
3、SVG绘图：
Scalable Vector Graphics，可缩放的矢量图；
元素组：<g></g>；把多个元素包含起来，每个组员共享<g>元素的属性；
4、SVG绘图——绘制矩形：
①SVG图形属性可使用HTML标签属性来声明，也可以使用类似CSS的形式声明——SVG标签专用样式；这些属性不属于HTML DOM，不能直接rect.x读写，可使用核心DOM的setAttribute();方法操作；
②<rect></rect>
③属性：width——矩形的宽；height——矩形的高；x——定位点的X坐标；y——定位点的Y坐标；fill——填充颜色；fill-opacity——填充颜色透明度；stroke——描边颜色；stroke-width——描边宽度；
④使用JS创建新SVG元素：
方法一：svg.innerHTML='<rect></rect>';
方法二：document.createElementNS('http://www.w3.org/2000/svg','rect');
5、SVG绘图——绘制圆形：
①<circle></circle>
②属性：r——半径；cx——圆心的X坐标；cy——圆心的Y坐标；fill——填充颜色，默认为#000；fill-opacity——填充颜色透明度；stroke——描边颜色，默认为transparent；stroke-width——描边宽度；
6、SVG绘图——绘制椭圆：
①<ellipse></ellipse>
②属性：rx——横向半径；ry——纵向半径；cx——圆心的X坐标；cy——圆心的Y坐标；fill——填充颜色，默认为#000；fill-opacity——填充颜色透明度；stroke——描边颜色，默认为transparent；stroke-width——描边宽度；
7、SVG绘图——绘制直线：
①<line></line>
②属性：x1——起点横坐标；y1——起点纵坐标；x2——终点纵坐标；y2——终点纵坐标；stroke——描边颜色，默认transparent；stroke-width——描边宽度；
8、SVG绘图——绘制折线：
①<polyline></polyline>
②属性：points——折线上的点，取值："0,0 10,20 x,y ..."；fill——填充颜色，默认为#000；fill-opacity——填充颜色透明度，必须设置为0，否则会自动填充；stroke——描边颜色，默认为transparent；stroke-width——描边宽度；
9、SVG绘图——绘制多边形：
①<polygon></polygon>
②属性：points——多边形各角上的点，取值："0,0 10,20 x,y ..."；fill——填充颜色，默认为#000；fill-opacity——填充颜色透明度；stroke——描边颜色，默认为transparent；stroke-width——描边宽度；
10、SVG绘图——绘制文本：
①<text>文本内容</text>
②属性：x——起点横坐标；y——起点纵坐标；font-size——字体大小；font-family——字体类型；fill——填充颜色，默认为#000；fill-opacity——填充颜色透明度；stroke——描边颜色，默认为transparent；stroke-width——描边宽度；
11、SVG绘图——绘制图像：
①若绘制了位图在SVG上，SVG图放大后也会失真；
②<image></image>
③属性：x——起点横坐标；y——起点纵坐标；xlink:href——指定图片的URL；width——图片的宽，默认为0不显示；height——图片的高，默认为0不显示；
12、SVG绘图中的渐变色：
渐变对象属于SVG中的特效对象——特效对象，都必须定义在<defs></defs>标签内；例：
<svg id="s1" width="500" height="400">
<defs>
<!--定义id为rainbow的特效元素-->
<linearGradient id="rainbow" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="0" stop-color="red"></stop>
<stop offset="1" stop-color="purple"></stop>
</linearGradient>
</defs>
<!--引用id为rainbow的特效元素-->
<rect x="50" y="100" width="400" height="200" fill="url(#rainbow)"></rect>
</svg>