HTML5/Canvas两点之间的电弧线

Ray between two points

canvas, bolt, lightning

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

function Properties() {
    this.numberOfDots = 2,
        this.dotSpeed = 0,
        this.dotRadius = 0,
        this.lineWidth = 2,
        this.rayPieces = 15,
        this.rayRandomise = 50
}

var dots = [],
    dotLengthThreshold,
    properties = new Properties(),
    canvas,
    ctx;

$(document).ready(function() {
    var gui = new dat.GUI();
    gui.add(properties, 'rayPieces', 1, 20).step(1);
    gui.add(properties, 'rayRandomise', 1, 100);
    canvas = document.getElementById("myCanvas");
    canvas.width = $(window).width();
    canvas.height = $(window).height();
    ctx = canvas.getContext("2d");
    dotLengthThreshold = Math.min(canvas.width, canvas.height) / 2;
    init();

$(window).resize(function() {
        canvas.width = $(window).width();
        canvas.height = $(window).height();
        dotLengthThreshold = Math.min(canvas.width, canvas.height) / 2;
    });

});

function init() {
    iterate();
}

function iterate() {
    clearCanvas();
    drawLightning(canvas.width / 2, canvas.height * 0.25, canvas.width / 2, canvas.height * 0.75);
    requestAnimationFrame(iterate);
}

function clearCanvas() {
    ctx.save();
    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.restore();
}

}
    ctx.strokeStyle = "rgb(255, 0, 127)";
    ctx.lineWidth = properties.lineWidth;
    ctx.lineCap = "round";
    ctx.stroke();
    ctx.restore();
}

function findThirdPoint(ax, ay, bx, by) {
    var c = {
        x: 0,
        y: 0
    };
    var slope = (ax - bx) / (by - ay);
    var sign = Math.random() < 0.5 ? -1 : 1;
    c.x = (1 / (Math.sqrt((1 + (slope * slope))))) * sign;
    c.y = (slope / (Math.sqrt((1 + (slope * slope))))) * sign;
    return c;
}

function distance(x1, y1, x2, y2) {
    return Math.sqrt((x2 -= x1) * x2 + (y2 -= y1) * y2);
}

编译

CSS

HTML

Ray between two points

canvas, bolt, lightning

编辑器支持Emmet

快捷键

Ray between two points

canvas, bolt, lightning

HTML5/Canvas 点评网超级英雄电影的宣传动效页面

HTML5/Canvas 3D螺旋纹 | 悬挂的盘香

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：