第十五章：使用canvas绘图

使用canvas绘图

15.1基本用法

1.检测getContext()方法是否存在

2.设置其width、height属性

3.调用getContext()取得绘图上下文对象

15.22D上下文

坐标开始于<canvas>元素的左上角，原点坐标是（0,0）                

15.2.1填充和描边

fillStyle属性是填充

strokeStyle属性是描边

都可以使用css中指定颜色值的任何格式，如十六进制、名字、rgba()等等

15.2.2绘制矩形

以下三个方法都能接收四个参数：矩形的x坐标、矩形的y坐标、矩形的宽度、矩形的高度

fillRect()填充指定颜色

strokeRect()用指定颜色描边

clearRect()清除矩形区域

15.2.3绘制路径

1.调用beginPath()绘制新路线

2.调用stroke()绘制路线到画布上

15.2.4绘制文本

以下两个方法都可接收四个参数：要绘制的文本字符串、x坐标、y坐标、最大像素宽度。这两个方法都有三个属性作为基础:font、textAlign、textBaseline.

fillText()方法使用fillStyle属性绘制文本

strokeText()方法使用strokeStyle属性绘制文本

15.2.5变换

rotate(angle)绕原点旋转图像angle弧度

scale(scaleX, scaleY)缩放图像

translate(x,y)坐标原点移动到(x,y)

transform()修改变换矩阵

set Transform()将变换矩阵重置为默认对象

save()方法可以将所有设置进入栈结构，妥善保管，然后可以对上下文进行修改

若要回到保存之前的设置时，可以调用restore（）方法，恢复之前的状态

15.2.6绘制图像

drawImage()图像不能来于其他域

三种不同参数组合：

1. 三个参数：传入<img>元素，绘制起点的x、y坐标
2. 五个参数：第一种组合后加上两个参数，分别是目标的宽度和目标高度
3. 九个参数：要绘制的图像、源图像的x坐标、源图像的y坐标、源图像的宽度、源图像的高度、目标图像的x坐标、目标图像的y坐标、源图像的宽度、源图像的高度

15.2.7阴影

ShadowColor

shadowOffsetX

shadowOffsetY

shadowBlur模糊的像素数，默认为0

15.2.8渐变

1.调用creatLinearGradient()创建线性渐变，接收四个参数：起点的x坐标、起点的y坐标、终点的x坐标、终点的y坐标。调用createRadial Gradient()创建径向渐变，接收六个参数：起点圆的圆心x、y、半径和终点圆的圆心x、y、半径。

2.使用addColorStop()方法指定色标，接收两个参数：色标位置（从0到1之间的数字）和css颜色值

15.2.9模式

模式即为图像来填充和描边图形

1. 调用createPattern（）创建新模式，传入两个参数：<img>和css中表示如何重复图像的字符串

15.2.10使用图像数据

getImageDate()取得原始图像数据，接收四个参数：画面区域的x、y坐标、像素宽度和高度，返回的是ImageDate的实例，它有三个属性：width、height、date

15.2.11合成

globalAlpha指定所有绘制图形的透明度

globalCompositionOperation后绘制的图形怎样与先绘制的图形结合