Skip to content

Instantly share code, notes, and snippets.

Created December 4, 2016 02:09
Show Gist options
  • Save anonymous/6b1a8d54e0e3eecbf70066a80c15cc4a to your computer and use it in GitHub Desktop.
Save anonymous/6b1a8d54e0e3eecbf70066a80c15cc4a to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/tugoqon
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
canvas {
border: 1px solid black
}
</style>
</head>
<body>
<canvas></canvas>
<script id="jsbin-javascript">
// angel calderaro
const canvas = document.getElementsByTagName('canvas')[0]
const ctx = canvas.getContext('2d')
canvas.width = 300
canvas.height = 300
const circle = { x: 150, y: 150, r: 100 }
let t = 1
function draw () {
ctx.fillRect(circle.x, circle.y, 5, 5)
ctx.fillRect(circle.r * Math.cos(t) + circle.x, circle.r * Math.sin(t) + circle.y, 2, 2)
t++
if(t >= 360){
t = 0
ctx.clearRect(0,0,300,300)
}
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
</script>
<script id="jsbin-source-css" type="text/css">canvas {
border: 1px solid black
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// angel calderaro
const canvas = document.getElementsByTagName('canvas')[0]
const ctx = canvas.getContext('2d')
canvas.width = 300
canvas.height = 300
const circle = { x: 150, y: 150, r: 100 }
let t = 1
function draw () {
ctx.fillRect(circle.x, circle.y, 5, 5)
ctx.fillRect(circle.r * Math.cos(t) + circle.x, circle.r * Math.sin(t) + circle.y, 2, 2)
t++
if(t >= 360){
t = 0
ctx.clearRect(0,0,300,300)
}
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);</script></body>
</html>
canvas {
border: 1px solid black
}
// angel calderaro
const canvas = document.getElementsByTagName('canvas')[0]
const ctx = canvas.getContext('2d')
canvas.width = 300
canvas.height = 300
const circle = { x: 150, y: 150, r: 100 }
let t = 1
function draw () {
ctx.fillRect(circle.x, circle.y, 5, 5)
ctx.fillRect(circle.r * Math.cos(t) + circle.x, circle.r * Math.sin(t) + circle.y, 2, 2)
t++
if(t >= 360){
t = 0
ctx.clearRect(0,0,300,300)
}
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment