如何在canvas上实现圆形渐变色画笔

Rounded Gradient Stroke

h5, gradient, pen

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2448
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var PI2 = Math.PI * 2;
Math.toRadians = function(degrees) {
    return degrees * Math.PI / 180;
};
var mouse = {
    x: Math.random() * window.innerWidth,
    y: Math.random() * window.innerHeight
};

function onMouseMove(event) {
    mouse = {
        x: event.clientX,
        y: event.clientY
    };
}

ctx.scale(this.scale, this.scale);
        ctx.beginPath();
        var grd = ctx.createRadialGradient(-this.center.x, -this.center.y, this.center.y, this.center.x, this.center.y, this.center.x);
        grd.addColorStop(0, "#1f056c");
        grd.addColorStop(0.2, "#23bee0");
        grd.addColorStop(0.4, "#e4b803");
        grd.addColorStop(0.6, "#b80186");
        grd.addColorStop(0.8, "#44b73c");
        grd.addColorStop(0.9, "#23bee0");
        grd.addColorStop(1, "#e4b803");
        ctx.strokeStyle = grd;
        var _current = this.vertex[this.vertex.length - 1];
        var _first = _next = this.vertex[0];
        var _start = _current.curveTo(_next);
        ctx.moveTo(_start.x, _start.y);
        for (var i = 1; i < this.vertex.length; i++) {
            _current = this.vertex[i];
            _next.drawCurve(ctx, _current);
            _next = _current;
        };
        _next.drawCurve(ctx, _first);
        ctx.lineWidth = Math.abs(Math.sin(time) * this.lineWidth);
        ctx.fillStyle = "#000";
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
    }
    this.setup();
    return this;
}

var canvas, context;
var _blob;

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    time = new Date().getTime() * 0.001;
    context.save();
    _blob.render(context);
    context.restore();
}

init();
animate();

var gui = new dat.GUI();
gui.add(_blob, 'lineWidth', 0.5, 10);
gui.add(_blob, 'alpha', 0, 1);
gui.add(_blob, 'radius', 10, 150).step(1).onChange(_blob.setup.bind(_blob));
gui.add(_blob, 'sides', 5, 20).step(1).onChange(_blob.setup.bind(_blob));

编译

CSS

HTML

Rounded Gradient Stroke

h5, gradient, pen

编辑器支持Emmet

快捷键

Rounded Gradient Stroke

h5, gradient, pen

如何使用canvas 2d实现三维顶点海洋动画

使用h5 canvas绘制变宽渐变色线条

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：