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> | |
// grab our canvas element & it's 2d context | |
var canvas = d3.select("#canvas"); | |
var context = canvas.node().getContext('2d'); | |
// create a new color using D3's HSL color space | |
var startColor = d3.hsl('red'); | |
// shift hue by `deg` number of degrees | |
var rotateHue = function(deg) { | |
startColor.h += deg; | |
return startColor; | |
} | |
// update the canvas with a colored circle | |
var setColor = function setColor(val) { | |
context.clearRect(0, 0, 400, 400); | |
context.fillStyle = rotateHue(val); | |
context.arc(200, 200, 200, 0, 2 * Math.PI, true); | |
context.fill(); | |
context.closePath(); | |
} | |
// use D3 interval to create the animation, incrementing | |
// hue value each function call | |
// if it reaches 360, set it back to 0 | |
var x = 0; | |
var t = d3.interval(function() { | |
if (x < 360) { | |
x += 0.005; | |
setColor(x); | |
} else { | |
x = 0; | |
} | |
}, 100); | |
</script> | |
</body> |