canvas绘制圆形图片(save，restore，clip，g

2018-10-10 本文已影响0人闲余幽梦

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)
}

得到效果：

1.png

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)
}

效果如下：

2.png

当我们使用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

得到效果

3.png

可以通过设置createRadialGradient的开始渐变圆大小或者使用addColorStop增加中间过度颜色来控制渐变范围

参考文章:
https://blog.csdn.net/qq_30668579/article/details/51495909
https://blog.csdn.net/laijieyao/article/details/41862473