Skip to content

Instantly share code, notes, and snippets.

@syntagmatic
Last active January 16, 2019 15:12
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save syntagmatic/8852129f7d6508d6fd67c4067f85512c to your computer and use it in GitHub Desktop.
Intro to HTML5 Canvas, Øredev 2018
<style>
body {
width: 1000px;
margin: 0 auto;
padding: 0;
}
</style>
<canvas id='painting' width=740 height=740></canvas>
<script src="d3.v4.js"></script>
<script>
var canvas = document.getElementById('painting')
var context = canvas.getContext('2d')
// center the animation
context.translate(canvas.width/2, canvas.height/2)
d3.timer(function(t) {
context.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height)
var x = Math.cos(t / 2000 * Math.PI) * 120
var y = Math.sin(t / 2000 * Math.PI) * 120
var color = "hsl(" + (Math.floor(t/30) % 360) + ",80%,60%)"
circle(x,y,40,color)
})
function circle(x,y,radius,color) {
context.fillStyle = color
context.beginPath()
context.arc(x,y,radius,0,2*Math.PI)
context.fill()
}
</script>
<canvas id='painting' width=120 height=500></canvas>
<script>
var canvas = document.getElementById('painting')
var context = canvas.getContext('2d')
var data = [1, 1, 2, 3, 5, 8, 13, 21, 34]
context.fillStyle = "#f5b"
data.forEach(drawBar)
function drawBar(d,i) {
var x = 12*i;
var y = 200;
var width = 10;
var height = -5*d;
context.fillRect(x,y,width,height);
}
</script>
View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment