canvas画圆形头像(clip,globalCompositeOperation的使用)

实现圆形头像的几种方式
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)
}

得到效果:
canvas画圆形头像(clip,globalCompositeOperation的使用)_第1张图片
globalCompositeOperation组合实现
globalCompositeOperation用于控制源图像在目标图像上的显示方式。

1、源图像: 指你准备绘制到画布上的图像
2、目标图像:在画布上已经绘制的图像
canvas画圆形头像(clip,globalCompositeOperation的使用)_第2张图片

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

效果如下:
canvas画圆形头像(clip,globalCompositeOperation的使用)_第3张图片

当我们使用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),前三个参数表示渐变开始时的圆,后三个参数表示渐变结束时的圆。

2、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

得到效果
canvas画圆形头像(clip,globalCompositeOperation的使用)_第4张图片

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

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

你可能感兴趣的:(canvas画圆形头像(clip,globalCompositeOperation的使用))