一、渐变效果的使用
1、创建渐变对象
var grd = context.createLinearGradient(x1,y1,x2,y2)
x1,y1 - 基准线的起点坐标值
x2,y2 - 基准线的终点坐标值
2、给渐变对象制定渐变颜色值
addColorStop(position,color)
可以设置多个，position范围（0-1），表示颜色作用的范围
3、将渐变对象作为画布对象的颜色
context.fillStyle = grd;
4、绘制图形
context.fillRect(0,0,400,400);
二、绘制文字
1、属性
1）font：与css的font属性类似，接受值也完全相同
2）textAlign：水平对齐方式，值可以是left、right和center
3）textBaseline：文本基线,设置垂直方向对齐,值可以是top、middle和bottom，alphabetic（默认值，字母基线）hanging（ 悬挂基线）
文字的对齐并不是与画布的大小对齐的，而是和文本基线对齐的
基线对齐
当textAlign设置为left时，此时文字会移动到基线右侧，同理为right时，文字会位移到基线左侧。
2、方法
1）strokeText(text,x,y)：在指定位置绘制空心文字，后面的x,y指的是左下角的坐标
2）fillText(text,x,y)：在指定位置绘制实心文字
3）measureText()：返回指定文字的大小信息
三、绘制阴影
属性：
1）shadowColor：使用CSS语法声明阴影颜色
2）shadowOffsetX/shadowOffsetY：接受一个数字，确定对象阴影的水平/垂直投射距离
3）shadowBlur：为阴影生成模糊效果
四、绘制矩形和圆形
1、标识方法
1）beginPath()：开始创建路径，每次绘制新图形之前，都要先重新创建一个路径
2）closePath()：结束创建路径，主要用于让线条闭合
2、设置方法
1）rect(x,y,width,height)：设置矩形形状
x和y - 矩形的左上角
width/height - 矩形的宽和高
2）arc(x,y,radius,startAngle,endAngle,direction)：设置圆形形状
x/y - 设置圆心的坐标值
radius - 圆形的半径
startAngle - 开始位置
endAngle - 结束位置
direction - 方向：默认值为false，表示顺时针
网友评论