渐变

一般用线性或径向渐变来填充或者描边

新建canvasGradient对象，赋给fillStyle或strokeStyle
①createLinearGradient(x1,y1,x2,y2)

渐变的起点(x1,y1),渐变的终点(x2,y2)

②createRadialGradient(x1,y1,r1,x2,y2,r2）

前三个以(x1,y1)为原点，半径为r1的圆，后三个以(x2,y2)为原点，半径为r2的圆

创建canvasGradient对象

用addColorStop方法上色

gradient.addColorStop(position,color)

position是一个0.0-1.0之间的数值，表示渐变中颜色所在的相对位置。如：0.5表示颜色在正中间

color：必须是一个有效的css颜色值（#fff，rgba(0,0,0,1))等

可以根据需要加多个色标

     var canva=document.getElementById('canva')
     var ctx=canva.getContext('2d')
     var lineargradient=ctx.createLinearGradient(0,0,150,150)
     lineargradient.addColorStop(0.1,'red')
     lineargradient.addColorStop(0.6,'blue')
     ctx.fillStyle=lineargradient
     ctx.fillRect(10,10,130,130)

 注意的是：①将渐变方法要赋给ctx的fillStyle或者stokeStyle  

                   ②ctx要有自己的形状/路径等

                   ③可以加多个色标

图案样式 Pattern

方法：createPattern （image，type）

Type ：repeat，repeat-x，repeat-y 和 no-repeat。

和渐变一样的方法，赋给fillStyle或strokeStyle

为了数据加载的完整性，图片要用一个onload来确保设置图案之前图像已经装载完毕

img.onload = function() {

    // 创建图案
    var ptrn = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0, 0, 150, 150);

  }

阴影Shadow

①shadowOffsetX/Y=float

设定阴影在X轴/Y轴的延伸距离，不受变换矩阵影响，负值表示阴影会往上或左延伸，正值往下或右延伸，默认为0

②shadowBlur=float

阴影的模糊程度，不和像素数量和矩阵的影响，默认0

③shadowColor=color

标准的CSS颜色，默认全透明的黑色

填充规则

用到fill（或者clip和isPointPath），选择nonzero（默认）或evenodd

规则根据某处在路径的外面或者里面来决定该处是否被填充，这对于自己与自己路径相交或者路径被嵌套的时候是有用的。

绘制文本

①fillText（text,x,y[,maxWidth])

在(x,y）位置填充指定的文本，宽度可选

②strokeText（text,x,y[,maxWidth])

在（x，y）位置绘制文本边框，宽度可选

文本样式：

font=value 文本样式 ‘10px sans-serif’  和css相似

textAlign=value  对齐方式： start（默认），end，left，right，center

textBaseLine=value 基线对齐方式

top，hanging，middle，alphabetic（默认），ideographic，bottom

direction=value 文本方向 ltr，rtl，inherit（默认）

文本宽度可以用 measureText（）方法，返回一个 TextMetrics对象

使用图片

步骤：获得一个指向HTMLImageElement的对象或另一个canvas元素的引用作为源，也可以通过提供一个URL的方式使用图片，使用drawImage（）函数绘制到画布上

如何获得需要绘制的图片？

下面的类型任意一种都可以

HTMLImageElment   HTMLVideoElement   HTMLCanvasElement   ImageBitmap

使用相同页面内的图片

document.images集合  document.getElementsByTagName()方法  

其他域名下的图片

在HTMLImageElement上使用crossOrigin属性，要那个服务器允许跨域访问，否则将会污染canvas

创建图像

用脚本新创建一个 HTMLImageElement对象,用load事件保证加载完毕后使用

var img=new Image()
img.onload=function(){}
img.src='xxx.png'

或用data：url

img.src='data:image/gif;base64,xxxxxxxxxxxxxx'

优点：图片内容即时可用，无需去服务器，将css，html，js封装在一起

缺：图像无法缓存，图片大的话url数据相当长

绘制图片： drawImage(image,x,y)

样式：

缩放 Scaling

drawImage(image,x,y,Width,Height) 后面两个参数控制画入的图片缩放的大小

切片 Slicing

drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)

除了第一个，前面4个是定义图像源的切片位置和大小，后四个定义目标的显示位置和大小