canvas属性速查表：http://www.webhek.com/misc/html5-canvas-cheat-sheet
save和restore
save用于保存当前的画布状态，restore将画布状态重置到save保存时的样子。画布状态分为画布的坐标(transform)，画布绘制区域(clip)，画布中设置的组合方式(globalCompositeOperatio)。当我们在使用transform,clip和globalCompositeOperatio时会改变画布的状态，而这种改变会影响到接下来的画布绘制操作，所以在进行这种操作前需要使用save来对画布进行一次保存，在进行改变状态后的下一步操作中使用restore来重置画布状态。
实现圆形头像的几种方式
clip实现蒙版效果
使用clip会对画布设置一个绘制范围，clip后的操作都只会在这个绘制范围里显示，超出这个范围的绘制操作将不会在画布中显示。代码如下：
var canvas = document.getElementById('canvas')
canvas.width = 300
canvas.height = 300
var ctx = canvas.getContext('2d')
var img = new Image()
img.src = 'http://h.hiphotos.baidu.com/zhidao/pic/item/6f061d950a7b02086c89030660d9f2d3562cc890.jpg'
img.onload = function () {
// 通过arc来绘制一个圆形区域
ctx.arc(150, 150, 60, 0, 2 * Math.PI)
ctx.clip()
ctx.drawImage(img, 90, 90, 120, 120)
}
得到效果：
globalCompositeOperation组合实现
globalCompositeOperation用于控制源图像在目标图像上的显示方式。
- 源图像: 指你准备绘制到画布上的图像
- 目标图像：在画布上已经绘制的图像
属性值：
| 值 | 描述 |
|---|---|
| source-over | 默认。在目标图像上显示源图像。 |
| source-atop | 源图像为透明的，只有源图像与目标图像有交集的地方显示源图像，其他部分透明 |
| source-in | 源图像和目标图像都透明，只有源图像和目标图像有交集的地方不透明，且显示源图像 |
| source-out | 目标图像透明，源图像不透明，如果目标图像和源图像有交集的话，交集部分的图像透明 |
| destination-over | 将源图像绘制在目标图像的下层 |
| destination-atop | 目标图像透明，源图像不透明，如果目标图像和源图像有交集的话，在交际部分显示目标图像 |
| destination-in | 源图像和目标图像都透明，只有目标图像和源图像交集的部分不透明且显示目标图像 |
| destination-out | 目标图像不透明，源图像透明，如果目标图像和源图像有交集的话，交集部分图像透明 |
| lighter | 源图像和目标图像一起绘制在画布中，如果两者之间有交集的话颜色会进行叠加 |
| copy | 画布上只显示源图像，目标图像都不在画布中显示 |
| xor | 源图像和目标图像都在画布中显示，如果两者之间有交集的话，交集部分不显示图像 |
var canvas = document.getElementById('canvas')
canvas.width = 300
canvas.height = 300
var ctx = canvas.getContext('2d')
var img = new Image()
img.src = 'http://h.hiphotos.baidu.com/zhidao/pic/item/6f061d950a7b02086c89030660d9f2d3562cc890.jpg'
img.onload = function () {
// 通过arc来绘制一个圆形区域
ctx.drawImage(img, 90, 90, 120, 120)
ctx.globalCompositeOperation = 'destination-in'
ctx.fillStyle = '#fff'
ctx.arc(150, 150, 60, 0, 2 * Math.PI)
ctx.fill()
ctx.globalCompositeOperation = 'lighter'
ctx.fillStyle = '#000'
ctx.fillRect(0, 0, canvas.width, canvas.height)
}
效果如下：
当我们使用globalCompositeOperation时，绘制区域的时候需要填充颜色，如果没有填充颜色或者填充颜色的透明度为0时并不会实现组合的效果。
增加头像的羽化效果，通过createRadialGradient实现
绘制渐变效果
通过createRadialGradient和createLinearGradient实现颜色的渐变效果，其中createRadialGradient是径向渐变，createLinearGradient是线性渐变。
-
createRadialGradient用于创建放射性/圆形渐变，使用addColorStop来定义颜色的过渡，渐变的颜色可以用于填充绘制的矩形，圆形线条和文本。代码如下：
let grad = ctx.createRadialGradient(150, 150, 40, 150, 150, 60)
grad.addColorStop(0, 'rgba(255, 255, 255, 1)')
grad.addColorStop(1, 'rgba(255, 255, 255, 0)')
ctx.arc(150, 150, 60, 0, 2 * Math.PI)
ctx.fillStyle = grad
ctx.fill()
其中createRadialGradient有六个参数（x0,y0,r0,x1,y1,r1），前三个参数表示渐变开始时的圆，后三个参数表示渐变结束时的圆。
-
createLinearGradient用户绘制线性渐变，有四个参数（x0,y0,x1,y1），分别表示两个点，通过两点连线确定颜色渐变的方向，使用addColorStop来定义多种颜色的过渡。案例：
let grad = ctx.createLinearGradient(10, 10, 100, 100)
grad.addColorStop(0, 'rgba(255, 255, 255, 1)')
grad.addColorStop(1, 'rgba(255, 255, 255, 0)')
ctx.fillStyle = grad
ctx.fillRect(5, 5, 100, 50)
这边由于绘制的是圆形头像，所以使用createRadialGradient来实现，修改上方代码如下：
// 替换掉 ctx.fillStyle = '#fff'
let grad = ctx.createRadialGradient(150, 150, 40, 150, 150, 60)
grad.addColorStop(0, 'rgba(255, 255, 255, 1)')
grad.addColorStop(1, 'rgba(255, 255, 255, 0)')
ctx.fillStyle = grad
得到效果
可以通过设置createRadialGradient的开始渐变圆大小或者使用
addColorStop增加中间过度颜色来控制渐变范围
参考文章:
https://blog.csdn.net/qq_30668579/article/details/51495909
https://blog.csdn.net/laijieyao/article/details/41862473