03-HTML5强大的图像支持（借由canvas和svg）

web端图像绘制手段：
canvas：绘制位图， 图像中不会产生任何新的dom对象。
SVG：绘制矢量图，图像中包含子dom节点方便js交互。
位图成像是以像素为单位的，而矢量图是以线条为构成单元 位图放大后会失真，清晰度下降，但矢量图支持缩放，不会因缩放产生图像失真。但是位图成像色彩更丰富。

<canvas id="canvas" width="" height=""></canvas>

fill： 填充内容 stroke：绘制边框 rect： 矩形

常用的属性和方法如绘图步骤：
绘图步骤：
首先获得canvas元素：var c = document.getElementById(“canvas”);
其次 取得图形上下文： var cxt = c.getContext(“2d”);图形上下文是一个封装了很多绘图功能的对象。

图形上下文的一些属性和方法如下代码：

cxt.fillStyle = 颜色
cxt.strokeStyle = 颜色
cxt.lineWidth = 5;     cxt.rect( x, y, width, height)

cxt.fillRect(x, y, width, height);
cxt.strokeRect(x, y, width, height);
cxt.clearRect(x, y, width, height); 

    cxt1.beginPath();
    cxt1.arc( i*25, i*25, i*5, 0, Math.PI*2, true)
    cxt1.closePath();
    cxt1.fill();//或者cxt1.stroke();         

cxt.moveTo(  x , y );
cxt.lineTo(  x , y );

var grd=cxt.createLinearGradient(0,0,175,50);
var grd=cxt.createRadialGradient(x,y,半径,x1,y1,半径);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

var img=new Image()
img.onload = function(){
	cxt.drawImage(img, 0, 0);
};
img.src="flower.png"

//保存当前环境 (保存画笔的粗细，颜色等)
	cxt.save();          ！！！！！！！！
	cxt.beginPath();
	cxt.moveTo(100,0);
	c