x/box-o-sand
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Smiles!

Browse Source
This commit is contained in:
Dan Buch 2013-02-10 21:59:11 -05:00
parent 6ae3b13cdc
commit 26c1e56b7a
1 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
html5/canvas/mdn-tutorial.html
View File

@ -9,20 +9,13 @@
</style> </style>
</head> </head>
<body> <body>
<canvas id="tutorial0" width="150" height="150"> <canvas id="tutorial0" width="150" height="150"></canvas>
hammer down <canvas id="tutorial1" width="150" height="150"></canvas>
</canvas> <canvas id="tutorial2" width="150" height="150"></canvas>
<canvas id="tutorial1" width="150" height="150">
rabbit ears
</canvas>
<script type="text/javascript"> <script type="text/javascript">
function draw0() { function draw0() {
var canvas = document.getElementById('tutorial0'); var ctx = document.getElementById('tutorial0').getContext('2d');
if (!canvas.getContext) {
return;
}
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(200, 0, 0)'; ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 55, 50); ctx.fillRect(10, 10, 55, 50);
@ -31,20 +24,31 @@
} }
function draw1() { function draw1() {
var canvas = document.getElementById('tutorial1'); var ctx = document.getElementById('tutorial1').getContext('2d');
if (!canvas.getContext) {
return;
}
var ctx = canvas.getContext('2d');
ctx.fillRect(25, 25, 100, 100); ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60); ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50); ctx.strokeRect(50, 50, 50, 50);
} }
function draw2() {
var ctx = document.getElementById('tutorial2').getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI*2, true);
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false);
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI*2, true);
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.stroke();
}
window.addEventListener('load', function() { window.addEventListener('load', function() {
draw0(); draw0();
draw1(); draw1();
draw2();
}, false); }, false);
</script> </script>
</body> </body>