Light flickering effect using html5 canvas and JavaScript
<canvas width=220 height=150></canvas> |
var canvas = $('canvas')[0]; | |
if (canvas.getContext) { | |
var ctx = canvas.getContext('2d'), | |
w = canvas.width, | |
h = canvas.height | |
x1 = 70, // x-coordinate of first circle | |
y1 = 75, // y-coordinate of first circle | |
x2 = 145, // x-coordinate of second circle | |
y2 = y1; // y-coordinate of second circle | |
function init () { | |
setInterval(draw, 100); | |
} | |
function frameBuffer () { | |
var buffer = document.createElement('canvas'); | |
buffer.width = canvas.width; | |
buffer.height = canvas.height; | |
var bufferContext = buffer.getContext('2d'); | |
var radgrad = bufferContext.createRadialGradient(x1, y1, 50, x1, y1, 40); | |
var radgrad2 = bufferContext.createRadialGradient(x2, y2, 145, 50, y2, 40); | |
bufferContext.fillStyle = "rgba(0,0,0,1)"; | |
bufferContext.fillRect(0, 0, w, h); | |
bufferContext.save(); | |
bufferContext.globalCompositeOperation = "destination-out"; | |
// add ellipses | |
bufferContext.beginPath(); | |
bufferContext.arc(x1, y1, 50, 0, Math.PI * 2, true); | |
bufferContext.arc(x2, y2, 50, 0, Math.PI * 2, true); | |
bufferContext.shadowBlur = 20; | |
bufferContext.shadowColor = "black"; | |
radgrad.addColorStop(0, "rgba(0,0,0,0.1)"); | |
radgrad.addColorStop(0.2, "rgba(0, 0, 0, " + (Math.random() + 0.2) + ")"); | |
radgrad.addColorStop(0.8, "rgba(0,0,0," + (Math.random() + 0.8) + ")"); | |
radgrad.addColorStop(1, "rgba(0,0,0,1)"); | |
radgrad2.addColorStop(0, "rgba(0,0,0,0.1)"); | |
radgrad2.addColorStop(0.2, "rgba(0, 0, 0, " + (Math.random() + 0.2) + ")"); | |
radgrad2.addColorStop(0.8, "rgba(0,0,0," + (Math.random() + 0.8) + ")"); | |
radgrad2.addColorStop(1, "rgba(0,0,0,1)"); | |
bufferContext.fillStyle = radgrad; | |
bufferContext.fill(); | |
bufferContext.fillStyle = radgrad2; | |
bufferContext.fill(); | |
bufferContext.restore(); | |
return buffer; | |
} | |
function draw () { | |
var buffer = frameBuffer(); | |
ctx.clearRect(0, 0, w, h); | |
ctx.drawImage(buffer, 0, 0); | |
} | |
init(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment