html5圆点连线,HTML5 Canvas两点之间的折线连接动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

let c = document.getElementById("theCanvas");

let ctx = c.getContext("2d"),

halfWidth = window.innerWidth / 2,

halfHeight = window.innerHeight / 2;

ctx.canvas.width = window.innerWidth;

ctx.canvas.height = window.innerHeight;

c.addEventListener('click', addDot);

let prevX = 0,

prevY = 0,

cx = 0,

cy = 0;

function addDot(e) {

let size = 0;

ctx.fillStyle = 'white';

ctx.strokeStyle = 'white';

ctx.beginPath();

if (e.x && e.y) {

drawDot(e.x, e.y, size);

} else {

drawDot(e.clientX, e.clientY, size);

}

}

function drawDot(x, y, s) {

if (s !== 10) {

ctx.arc(x, y, s, 0, 2 * Math.PI);

ctx.fill();

ctx.stroke();

s++;

requestAnimationFrame(function() {

drawDot(x, y, s);

});

} else {

if (prevX !== 0 && prevY !== 0) {

addLine(x, y, prevX, prevY);

} else {

prevX = x;

prevY = y;

}

}

}

function addLine(x, y, px, py) {

let goingForward = false,

goingUp = false;

ctx.beginPath();

ctx.moveTo(px, py);

cx = px;

cy = py;

if (cx < x) {

goingForward = true;

}

if (cy > y) {

goingUp = true;

}

drawLine(x, y, goingForward, goingUp);

}

function drawLine(x, y, gf, gu) {

let metX = false,

metY = false;

c.removeEventListener('click', addDot);

ctx.lineTo(cx, cy);

ctx.stroke();

if (gf) {

if (cx >= x) {

metX = true;

}

if (cx < x && !metX) {

cx += 4;

}

} else {

if (cx <= x) {

metX = true;

}

if (cx > x && !metX) {

cx -= 4;

}

}

if (gu) {

if (cy <= y) {

metY = true;

}

if (cy > y && !metY) {

cy -= 4;

}

} else {

if (cy >= y) {

metY = true;

}

if (cy < y && !metY) {

cy += 4;

}

}

if (!metY || !metX) {

requestAnimationFrame(function() {

drawLine(x, y, gf, gu);

});

} else {

prevX = x;

prevY = y;

c.addEventListener('click', addDot);

}

}