Canvas(二)

★ 绘制图像

//首先传入一个HTML<img>元素，以及 绘制该图像的起点(x,y)
    var image=document.images[0];
//获取一幅图像并绘制到上下文中，起点为(10,10),如果想改变Image大小，最后两个参数可以省略，默认1.0倍缩放。
    context.drawImage(image,10,10，width,height);
//可以把图像中的某个区域绘制到上下文中。drawImage( )方法有9个参数
//[要绘制的图像,源图像坐标X,源图像坐标Y,源图像宽度,源图像高度,目标图像坐标X,目标图像Y,目标图像宽度,目标图像高度]
context.drawImage(iamge,0,10,50,50,0,100,40,60);
//源图像是50X50像素，起点为(0,10)，绘制到(0,100)，大小为40X60像素。

★ 导出图像

var drawing=document.getElementById("drawing");
if(drawing.getContext){
//获得图像的数据URI
    var imgURI=drawing.toDataURL("img/png");
//显示图像
    var image=document.createElement("img");
    image.src=imgURI;
    document.body.appendChild(image);

★ 阴影

shadowColor：阴影颜色
shadowOffsetX/shadowOffsetY：X/Y轴方向偏移量
shadowBlur：阴影模糊像素数

★ 渐变

渐变由CanvasGradient实例表示，要调用createLinearGradient( )方法来创建一个新的线性渐变。该方法接收4个参数，起点的(x，y)和重点的(x，y)，并返回CanvasGradient对象的实例。

创建了渐变对象后，使用addColorStop( )方法来指定色标。这个方法接收两个参数：0(起始颜色)或1(结束颜色)和CSS颜色值。

var gradient=context.createLinearGradient(30,30,70,70);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");

创建放射渐变，可以使用createRadialGradient( )方法，该方法接收6个参数，分别是同心圆内圆的圆心半径和外圆的圆心半径

var gradient=context.createRadialGradient(55,55,10,55,55,30);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");