canvas之添加颜色样式、绘制文本、使用图片
一、使用颜色和样式
（一）色彩color
给图形上色，有两个重要的属性可以用到：fillStyle 和 strokeStyle。
fillStyle = color 设置图形的填充颜色。
strokeStyle = color 设置图形轮廓的颜色。
注意：一旦设置了fillStyle 或 strokeStyle的值，那么这个新值就会成为新绘制的图形的默认值。如果要给每个图形上不同的颜色，需要重新设置fillStyle 或strokeStyle的值。
- fillStyle示例
- strokeStyle示例
（二）透明度transparency
通过设置 globalAlpha属性或者使用一个半透明颜色作为轮廓或填充的样式。
globalAlpha = transparencyValue
这个属性影响到 canvas 里所有图形的透明度，有效的值范围是0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。
因为 strokeStyle 和 fillStyle 属性接受符合CSS 3 规范的颜色值，那我们可以用下面的写法来设置具有透明度的颜色。
// 指定透明颜色，用于描边和填充样式
ctx.strokeStyle= "rgba(255,0,0,0.5)";
ctx.fillStyle= "rgba(255,0,0,0.5)";
rgba（）和rgb（）方法类似，最后一位参数代表透明度。
- globalAlpha示例
- rgba()示例
（三）线型Line styles
可以通过一系列属性来设置线的样式。
lineWidth = value
设置线条宽度。属性值必须为正数，默认1.0
lineCap = type
属性 lineCap 的值决定了线段端点显示的样子。它可以为下面的三种的其中之一：butt，round 和 square。默认是 butt。
lineJoin = type
lineJoin 的属性值决定了图形中两线段连接处所显示的样子。它可以是这三种之一：round, bevel 和 miter。默认是 miter。
用三条折线来做例子，分别设置不同的 lineJoin 值。
最上面一条是 round 的效果，边角处被磨圆了，圆的半径等于线宽。中间和最下面一条分别是bevel 和 miter 的效果。当值是miter 的时候，线段会在连接处外侧延伸直至交于一点。
setLineDash(segments)
设置当前虚线样式。
lineDashOffset = value
设置虚线样式的起始偏移量。
用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式。
setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset 属性设置起始偏移量.
（四）渐变
线性渐变：createLinearGradient(x1, y1, x2, y2)
createLinearGradient 方法接受 4个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
径向渐变：createRadialGradient(x1, y1, r1, x2,y2, r2)
createRadialGradient 方法接受 6个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
（五）图案样式Patterns
createPattern(image, type)
该方法接受两个参数。Image可以是一个 Image 对象的引用，或者另一个 canvas 对象。
Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。
createPattern（）方法
（六）阴影Shadows
shadowOffsetX = float，shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为0。
shadowBlur = float
shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，默认为 0。
shadowColor = color
shadowColor 是标准的 CSS颜色值，用于设定阴影颜色效果，默认是全透明的黑色。
二、绘制文本
（一）canvas提供了两种方法来渲染文本:
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.
（二）文本样式
font = value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
textAlign = value
文本对齐选项.可选的值包括：start, end, left, right or center.默认值是 start。
textBaseline = value
基线对齐选项.可选的值包括：top, hanging, middle, alphabetic, ideographic,bottom。默认值是 alphabetic。
direction = value
文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
（三）文本测量
measureText()
将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。
三、使用图像
（一）
引入图像到canvas里需要以下两步基本操作：
1.获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片
2.使用drawImage()函数将图片绘制到画布上
（二）获得图片
1.canvas的API可以使用下面这些类型中的一种作为图片的源：
HTMLImageElement
这些图片是由Image()函数构造出来的，或者任何的元素
HTMLVideoElement
用一个HTML的 元素作为你的图片源，可以从视频中抓取当前帧作为一个图像
HTMLCanvasElement
可以使用另一个 元素作为你的图片源。
ImageBitmap
这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。
这些源统一由 CanvasImageSource类型来引用。
（三）改变图像大小
（四）切片