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

More with canvas

Browse Source
This commit is contained in:
Dan Buch 2013-02-10 18:22:52 -05:00
parent 250bfbdfa0
commit 6ae3b13cdc
1 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,12 +9,15 @@
</style> </style>
</head> </head>
<body> <body>
<canvas id="tutorial" width="150" height="150"> <canvas id="tutorial0" width="150" height="150">
hammer down hammer down
</canvas> </canvas>
<canvas id="tutorial1" width="150" height="150">
rabbit ears
</canvas>
<script type="text/javascript"> <script type="text/javascript">
function draw() { function draw0() {
var canvas = document.getElementById('tutorial'); var canvas = document.getElementById('tutorial0');
if (!canvas.getContext) { if (!canvas.getContext) {
return; return;
} }
@ -27,7 +30,22 @@
ctx.fillRect(30, 30, 55, 50); ctx.fillRect(30, 30, 55, 50);
} }
window.addEventListener('load', draw, false); function draw1() {
var canvas = document.getElementById('tutorial1');
if (!canvas.getContext) {
return;
}
var ctx = canvas.getContext('2d');
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
}
window.addEventListener('load', function() {
draw0();
draw1();
}, false);
</script> </script>
</body> </body>
</html> </html>