设置填充和描边颜色
- fillStyle : 设置用于填充绘画的颜色
- strokeStyle : 设置用于描边的颜色
- 以上两个值都可以接受颜色名,16 进制数据，rgb 值，甚至 rgba. 一般先进行设置样式然后进行绘制。
设置阴影
- 此部分内容由于使用性能差，故了解即可，阴影的设置常用图片实现
- shadowColor ： 设置或返回用于阴影的颜色。
- shadowBlur ： 设置或返回用于阴影的模糊级别,大于 1 的正整数，数值越高，模糊程度越大
- shadowOffsetX： 设置或返回阴影距形状的水平距离
- shadowOffsetY： 设置或返回阴影距形状的垂直距离
线性渐变样式
- 一般不用，都是用图片代替，canvas 绘制图片效率更高
- 线性渐变可以用于 矩形、圆形、文字等颜色样式，线性渐变是一个对象
- 语法：ctx.createLinearGradient(x0,y0,x1,y1); //参数：x0,y0 起始座标，x1,y1 结束座标
//创建线性渐变的对象，
var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, 'black'); //添加一个渐变颜色，第一个参数介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
grd.addColorStop(1, 'white'); //添加一个渐变颜色
ctx.fillStyle = grd; //关键点，把渐变设置到 填充的样式
圆形渐变(径向渐变)
- 创建放射状/圆形渐变对象。可以填充文本、形状等
- 语法: context.createRadialGradient(x0,y0,r0,x1,y1,r1);
- x0: 渐变的开始圆的 x 座标
- y0: 渐变的开始圆的 y 座标
- r0: 开始圆的半径
- x1: 渐变的结束圆的 x 座标
- y1: 渐变的结束圆的 y 座标
- r1: 结束圆的半径
绘制背景图
- 语法:ctx.createPattern(img,repeat) 方法在指定的方向内重复指定的元素
- 不常用，了解即可
- 第一参数：设置平铺背景的图片，第二个背景平铺的方式。
- image ： 规定要使用的图片、画布或视频元素
- repeat ： 默认。该模式在水平和垂直方向重复
- repeat-x ： 该模式只在水平方向重复。
- repeat-y ： 该模式只在垂直方向重复。
- no-repeat： 该模式只显示一次（不重复）
var ctx = c.getContext('2d');
var img = document.getElementById('lamp');
var pat = ctx.createPattern(img, 'repeat');
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat; // 把背景图设置给填充的样式
ctx.fill();
缩放(重点内容)
- scale() 方法缩放当前绘图，更大或更小
- 语法：context.scale(scalewidth,scaleheight)
- scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
- scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) +注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。
位移画布(重点)
- ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置
- x： 添加到水平座标（x）上的值
- y： 添加到垂直座标（y）上的值
- 发生位移后，相当于把画布的 0,0 座标 更换到新的 x,y 的位置，所有绘制的新元素都被影响,已绘制的旧元素不会改变
- 位移画布一般配合缩放和旋转等
画布旋转
- context.rotate(angle); 方法旋转当前的绘图
- 注意参数是弧度（PI）
绘制环境的保存和还原
- ctx.save() 保存当前环境的状态，可以把当前绘制环境进行保存到缓存中。
- ctx.restore() 返回之前保存过的路径状态和属性，获取最近缓存的 ctx
- 一般配合位移画布使用
绘制环境的透明度
- 语法 : context.globalAlpha=number
- number:透明值。必须介于 0.0（完全透明） 与 1.0（不透明） 之间
- 设置透明度是全局的透明度的样式。注意是全局的。
本文摘录自老马前端canvas学习笔记，如有侵权，请联系删除