第十五章:使用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()图像不能来于其他域
三种不同参数组合:
- 三个参数:传入<img>元素,绘制起点的x、y坐标
- 五个参数:第一种组合后加上两个参数,分别是目标的宽度和目标高度
- 九个参数:要绘制的图像、源图像的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模式
模式即为图像来填充和描边图形
- 调用createPattern()创建新模式,传入两个参数:<img>和css中表示如何重复图像的字符串
15.2.10使用图像数据
getImageDate()取得原始图像数据,接收四个参数:画面区域的x、y坐标、像素宽度和高度,返回的是ImageDate的实例,它有三个属性:width、height、date
15.2.11合成
globalAlpha指定所有绘制图形的透明度
globalCompositionOperation后绘制的图形怎样与先绘制的图形结合