<h1>Canvas Tutorial</h1>
<canvas id="canvas" width="200" height="200">No Support</canvas>
<style>
canvas { border: 1px solid #ccc; background: yellow; -moz-box-shadow: 0 0 4px #ccc; -moz-border-radius: 4px;}
</style>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = "rgb(150,250,0)";
<canvas id="canvas" width="200" height="200">No Support</canvas>
<style>
canvas { border: 1px solid #ccc; background: yellow; -moz-box-shadow: 0 0 4px #ccc; -moz-border-radius: 4px;}
</style>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = "rgb(150,250,0)";
// Filled Shape
context.beginPath();
context.moveTo(10,10);
context.lineTo(100,10);
context.lineTo(100,100);
context.lineTo(10,100);
context.moveTo(150, 10);
context.lineTo(180, 10);
context.lineTo(180,100);
context.lineTo(150, 100);
context.fill()
context.beginPath();
context.moveTo(10,10);
context.lineTo(100,10);
context.lineTo(100,100);
context.lineTo(10,100);
context.moveTo(150, 10);
context.lineTo(180, 10);
context.lineTo(180,100);
context.lineTo(150, 100);
context.fill()
// Stroke
</script>
</script>
No comments:
Post a Comment