C html5 canvas,HTML5 Canvas 涂鸦板

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var c = document.createElement('canvas'),

$ = c.getContext('2d'),

w = c.width = window.innerWidth,

h = c.height = window.innerHeight,

p = {

x: w / 2,

y: h / 2

};

document.body.appendChild(c);

function init() {

stage();

loop();

}

function stage() {

w = c.width = window.innerWidth;

h = c.height = window.innerHeight;

$.fillStyle = 'rgba(50, 50, 50, 1)';

$.fillRect(0, 0, w, h);

}

function step() {

var s = Math.random() * 50,

a = ~~(Math.random() * 360);

$.beginPath();

$.moveTo(p.x, p.y);

$.lineWidth = 1;

$.lineJoin = 'round';

$.lineCap = 'round';

$.strokeStyle = 'rgba(255, 255, 255, 1)';

p.x += s * Math.sin(a);

p.y += s * Math.cos(a);

return p;

}

function stepStage() {

$.fillStyle = 'rgba(50, 50, 50, 0.025)';

$.fillRect(0, 0, w, h);

}

function draw() {

stepStage();

var n = step();

$.lineTo(n.x, n.y);

if (n.x < 0 || n.x > w) n.x = Math.random() * w;

if (n.y < 0 || n.y > h) n.y = Math.random() * h;

$.stroke();

}

function loop() {

requestAnimationFrame(loop);

draw();

}

window.addEventListener('resize', stage);

init();