43 lines
735 B
HTML
43 lines
735 B
HTML
|
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
padding: 50px;
|
||
|
|
}
|
||
|
|
canvas {
|
||
|
|
border: 1px solid #eee;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script src="build/build.js"></script>
|
||
|
|
|
||
|
|
<canvas width=900 height=300></canvas>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var x = 0;
|
||
|
|
var y = 50;
|
||
|
|
var canvas = document.querySelector('canvas');
|
||
|
|
var ctx = canvas.getContext('2d');
|
||
|
|
var raf = require('raf');
|
||
|
|
|
||
|
|
function animate() {
|
||
|
|
raf(animate);
|
||
|
|
draw();
|
||
|
|
}
|
||
|
|
|
||
|
|
var prev = Date.now();
|
||
|
|
function draw() {
|
||
|
|
var curr = Date.now();
|
||
|
|
var diff = curr - prev;
|
||
|
|
var p = diff / 16;
|
||
|
|
ctx.clearRect(0, 0, 900, 300);
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.globalAlpha = .5;
|
||
|
|
ctx.arc(x, y, 10, 0, Math.PI * 2, false);
|
||
|
|
ctx.fill();
|
||
|
|
x += 2;
|
||
|
|
y += Math.sin(x/20) * 5;
|
||
|
|
prev = curr;
|
||
|
|
}
|
||
|
|
|
||
|
|
animate();
|
||
|
|
</script>
|