Now that we’ve rotated the context, we can draw our second line. Just as we had redefined the origin by using the translate method to move the context, we can employ the rotate method to turn the entire context a specified angle in radians relative to its existing position, as shown below: Thankfully, the context object provides us with another method, rotate, that makes our lives easier when it comes to this. Therefore, our next step will be to draw another line, starting from the origin, and forming an angle of 60° with our first line. Recall that previously we had said that a snowflake has six arms that are distributed evenly, and that the angle between each arm is 60°, or π/3 radians.
Change the end cap style to “butt” or “square”.Pick another set of colors for the background and line color.That’s better, but it’s still not much, is it? If you update the draw function with the code shown above and save the file, when you view the result in a browser you should see something similar to this: Open your text editor program and type in, or copy and paste, the following: Snowflake To get started, we’ll create a basic HTML document with a canvas element, script tag and a simple draw function. This can be any one of the following browsers: A browser that supports the HTML 5 canvas element.
Download Source File: Flash5Snowflakes.zip The following code block must be placed on the first frame of the main timeline. If you’d like to try this out on your own, here’s what you’ll need: Snowflakes in Flash 5 (ActionScript 1.0) Falling snowflakes is a popular theme. Here’s what the final product will look like:
ACTIONSCRIPT VECTOR CODE FOR A SNOWFLAKE HOW TO
Soon I’ll have to break out the shovel, but before then, I thought I’d put together a short tutorial on how to draw a snowflake using JavaScript and the HTML canvas element. It’s getting to be that time of the year again.
0 kommentar(er)
