Built with blockbuilder.org
forked from clhenrick's block: D3 Canvas color transition
license: mit |
Built with blockbuilder.org
forked from clhenrick's block: D3 Canvas color transition
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
html, body { margin:0;position:relative; width: 100%; height: 100%; background: #222 } | |
canvas { position: absolute; display: block; top: calc(50% - 200px); left: calc(50% - 200px);} | |
</style> | |
</head> | |
<body> | |
<canvas id="canvas" width=400 height=400></canvas> | |
<script> | |
var canvas = d3.select("#canvas"); | |
var context = canvas.node().getContext('2d'); | |
var i = d3.interpolateLab('red', 'purple'); | |
var setColor = function setColor(val) { | |
context.clearRect(0,0,400,400); | |
context.fillStyle = val; | |
context.arc(200, 200, 200, 0, 2 * Math.PI, true); | |
context.fill(); | |
context.closePath(); | |
} | |
var x = 0; | |
var t = d3.interval(function() { | |
if (x < 1) { | |
x += 0.01; | |
// console.log(x) | |
setColor(i(x)); | |
} else { | |
x = 0; | |
} | |
}, 90); | |
</script> | |
</body> |