使用Canvas实现按钮绕边动画

这是一个绕边动画的简化版本，便于讲解实现过程。可在此基础上实现渐变色和悬停效果。

canvas，button，教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 5056
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function Border(opt) {
    this.elem = opt.elem;
    this.active = true;
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.width = this.canvas.width = this.elem.outerWidth();
    this.height = this.canvas.height = this.elem.outerHeight();
    this.borderSize = parseInt(this.elem.css('border-left-width'), 10);
    this.waypoints = [
        [0, 0],
        [this.width - this.borderSize, 0],
        [this.width - this.borderSize, this.height - this.borderSize],
        [0, this.height - this.borderSize]
    ];
    this.tracer = {
        x: 0,
        y: 0,
        color: opt.color,
        speed: opt.speed,
        waypoint: 0
    };
    this.canvas.style.top = -this.borderSize + 'px';
    this.canvas.style.left = -this.borderSize + 'px';
    this.elem.append($(this.canvas));
}

Border.prototype.loop = function() {
    requestAnimationFrame($.proxy(this.loop, this));
    this.ctx.globalCompositeOperation = 'destination-out';
    this.ctx.fillStyle = 'rgba(0, 0, 0, .05)';
    this.ctx.fillRect(0, 0, this.width, this.height);
    this.ctx.globalCompositeOperation = 'source-over';
    this.ctx.fillStyle = this.tracer.color;
    this.ctx.fillRect(this.tracer.x, this.tracer.y, this.borderSize, this.borderSize);

var previousWaypoint = (this.tracer.waypoint == 0) ? this.waypoints[this.waypoints.length - 1] : this.waypoints[this.tracer.waypoint - 1],
        dxTotal = previousWaypoint[0] - this.waypoints[this.tracer.waypoint][0],
        dyTotal = previousWaypoint[1] - this.waypoints[this.tracer.waypoint][1],
        distanceTotal = Math.sqrt(dxTotal * dxTotal + dyTotal * dyTotal),
        angle = Math.atan2(this.waypoints[this.tracer.waypoint][1] - this.tracer.y, this.waypoints[this.tracer.waypoint][0] - this.tracer.x),
        vx = Math.cos(angle) * this.tracer.speed,
        vy = Math.sin(angle) * this.tracer.speed,
        dxFuture = previousWaypoint[0] - (this.tracer.x + vx),
        dyFuture = previousWaypoint[1] - (this.tracer.y + vy),
        distanceFuture = Math.sqrt(dxFuture * dxFuture + dyFuture * dyFuture);

if (distanceFuture >= distanceTotal) {
        this.tracer.x = this.waypoints[this.tracer.waypoint][0];
        this.tracer.y = this.waypoints[this.tracer.waypoint][1];
        this.tracer.waypoint = (this.tracer.waypoint == this.waypoints.length - 1) ? 0 : this.tracer.waypoint + 1;
    } else {
        this.tracer.x += vx;
        this.tracer.y += vy;
    }
}

var button = $(".red")[0];
$this = $(button);
var border = new Border({
    elem: $this,
    color: $this.data('color'),
    speed: $this.data('speed')
});

$(border.canvas).stop(true).animate({
    'opacity': 1
}, 400);

border.loop();

编译

CSS

HTML

这是一个绕边动画的简化版本，便于讲解实现过程。可在此基础上实现渐变色和悬停效果。

canvas，button，教程

编辑器支持Emmet

快捷键

这是一个绕边动画的简化版本，便于讲解实现过程。可在此基础上实现渐变色和悬停效果。

canvas，button，教程

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：