Posts
To view the Snippet Editor, choose Develop.View Snippet Editor from the
main menu (or choose Develop.Show Snippet Editor in Windows). The
Snippet Editor looks simple, but it’s actually quite powerful and useful.
Entering HTML, CSS, and JavaScript into the top window allows you to see
instantly how the browser renders your code in the lower window.
For now, you can get a feeling for what the Snippet Editor can do by opening
it and entering the following code into the upper window.
<html>
<body>
<canvas id = “test” width=”400” height=”300”></canvas>
<script>
var canvas=document.getElementById(‘test’);
var a = canvas.getContext(‘2d’);
a.fillStyle=’#000000’;
a.fillRect(20,20,40,20);
</script>
</html>
If you typed everything correctly, you see a black rectangle in the lower
window. Change the values in the parentheses next to fillStyle and
fillRect, and notice how the changes are reflected instantly in the lower
window.
Canvas is one of the new elements included in HTML5. I detail Canvas in
Chapter 19. If you’re as excited by this demo as I was the first time I saw it,
feel free to skip ahead now or check out www.canvasdemos.com to see some
great examples of what’s possible.
0 comments:
Post a Comment