I suspect a proper first step for a proper software project would involve a good deal of research and thinking. A good design might be involved, with clearly outlined goals and approaches. The libraries and technologies used in the project would probably be well-understood and well-defined. There might even be some fancy figures.
Fortunately for me, I did not aspire to the high standards of "proper software project." Instead, I did what any ADD-afflicted seven year old would do. Threw together scraps of code out of functions and elements as I learned about them.
Nonetheless, it was very helpful to start with a reference or two. This was the primary reference for me. Specifically, the part related to the <canvas> element. In addition, I looked closely at several of the examples on this page, and would frequently end up on the w3 schools' javascript pages through google searches for how to achieve this or that effect with javascript.
With a few tabs and a text editor open, I went at it, and it didn't take me too long to get to my first, super-exciting, <canvas> element with something drawn in it:
<html>
<body>
<!--
First, create the canvas element. It seem necessary to set
the width and the height attributes, or else the canvas itself
is distorted by the style attribute.
-->
<canvas id='newCanvas' width='100' height='100'
style="border: 1px dashed; width:100px;height:100px" >
Canvas not supported in your browser. <!--The stuff inside the
canvas tag will be the output if the canvas tag is not
supported by the web browser -->
</canvas>
<script> // Do some scripting! This will have in it all the
// logic I come up with, as well as the drawing calls
// I start by declaring two global variables. One is a
// reference to the canvas. The other is the drawing context
// of that canvas.
var newCanvas = document.getElementById("newCanvas");
var newContext = newCanvas.getContext('2d');
initA = function(){ // This function will get everything
// In this case, the only thing I do is set the fill color
// running of the drawing context to yellow, and ask the
// context to fill in a rectangle starting at position 5,5
// and 70 pixels to a side.
newContext.fillStyle='yellow';
newContext.fillRect(5,5,70,70);
}
initA(); // Launch the function that actually draws in the
// canvas |
The result is below:
Obviously, this is a very hello-world example of canvas' power, but even so, it took me a good hour to get this far the first time around. It is a godsend that there is absolutely no waiting for anything to compile the code, or else I probably wouldn't have even made it this far.
For next time, I think I'll try and write up my struggles with mouse events and a bit about bouncing boxes.
No comments:
Post a Comment