[HTML5] Canvas, first steps
Simple example: display second arrow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas</title>
</head>
<body>
<h1>Canvas example</h1>
<canvas width="400" height="200" id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var width = canvas.width;
var height = canvas.height;
var context = canvas.getContext('2d');
var backgroundColor = '#fff';
var penColor = '#46a546'
/* draw 10 sec lines */
context.strokeRect(0, 0, width, height);
for(var i=0; i<360; i+=30) {
var rad = i / 180. * Math.PI;
context.moveTo(width / 2 + (width / 2 - 7) * Math.cos(rad), height / 2 + (height / 2 - 7) * Math.sin(rad));
context.lineTo(width / 2 + (width / 2 - 4) * Math.cos(rad), height / 2 + (height / 2 - 4) * Math.sin(rad));
}
context.strokeStyle = penColor;
context.lineWidth = 3;
context.stroke();
var lastPos = 0
function updateArrows() {
var date = new Date();
/* remove previous arrow */
context.beginPath();
var rad = lastPos / 30. * Math.PI - Math.PI / 2;
context.moveTo(width / 2, height / 2);
context.lineTo(width / 2 + (width / 2 - 9) * Math.cos(rad), height / 2 + (height / 2 - 9) * Math.sin(rad));
context.strokeStyle = backgroundColor;
context.lineWidth = 3;
context.stroke();
/* draw new */
lastPos = date.getSeconds();
context.beginPath();
rad = lastPos / 30. * Math.PI - Math.PI / 2;
context.moveTo(width / 2, height / 2);
context.lineTo(width / 2 + (width / 2 - 10) * Math.cos(rad), height / 2 + (height / 2 - 10) * Math.sin(rad));
context.strokeStyle = penColor;
context.lineWidth = 1;
context.stroke();
setTimeout(updateArrows, 1000);
}
updateArrows();
</script>
</body>
</html>
Licensed under CC BY-SA 3.0