If you need professional help, send me an e-mail describing your needs and how to best contact you.
Sincerely,
F. Davies
fjdavies@yahoo.com
(360) 352-0242
ICQ 43536012
advertisements
|
Round Corners Canvas 1 Canvas 2 Buttons
An empty canvas, showing only a border.
Let's size it 100 by 100 and give it the id canvas_001
<canvas id="canvas_001" width="100" height="100"></canvas>
Let's do it again, with a new id and write to it from javascript in the head. The actual canvas tag is in the body, but the javascript which does the drawing is in head, and in this example, in the body tag is the following (onload) to call the javascript (named make_artwork2) into action:
<body onload="make_artwork2();">
That calls the JavaScript function named make_artwork2 which looks like this:
<script type="text/javascript">
function make_artwork2() {
var canvas = document.getElementById("canvas_002");
if (canvas.getContext) {
var thing001 = canvas.getContext("2d");
thing001.fillStyle = "rgb(255,255,255)";
thing001.fillRect (0, 0, 50, 50);
}
}
</script>
Much of that code is housekeeping and will be the same for every draw-to-canvas function you write.
You can stack up quite a bit of code in such a function, to draw many things. For reference, the X-axis is going from left to right, and the Y-axis is going down the page. Note above where it has 0, 0, 50, 50? This is from the starting X and Y then continuing on for another amount X and Y.
The line above that sets the color of the fill, in this case 255,255,255 which is white. ('Cause it is 255 red, plus 255 green, plus 255 blue, and that; is like turning on red green and blue lights - which merge to be white in color. If you are not familliar with colors in a digital sense then you might try playing with these numbers, keeping all three in the range of 0 to 255. All 3 set to zeros makes black and in the next example, we add another rectangle with transparency.
In that example, the the second fill code 'rgb' (red, green, blue) is replaced with 'rgba'. The additional 'a' stands for alpha and refers to transparency, as in: alpha-channel. We made it half transparent, or 0.5. The second rectangle is also bigger, starting at 25,25 and moving 75,75. Well, 25 and 75 add up to 100, and it likewise ends up filling to the bottom and left of our 100 by 100 canvas.
Essentially, we have just added the following code:
thing001.fillStyle = "rgba(0,127,255,0.5)";
thing001.fillRect (25, 25, 75, 75);
(The light blue color comes from the 0,127,255 and the transparency from the 0.5)
But enough of rectangles.
We will enlarge the canvas as we go and add more examples right on top of (following) the existing code. Next let us turn to drawing a (triangular) shape by selecting several points along a continuous path on a 200 by 200 canvas.
thing001.beginPath();
thing001.moveTo(75,75);
thing001.lineTo(175,75);
thing001.lineTo(75,175);
thing001.fillStyle = "rgba(255,127,127,0.5)";
thing001.fill();
thing001.beginPath();
thing001.moveTo(175,175);
thing001.lineTo(175,50);
thing001.lineTo(150,150);
thing001.lineTo(50,175);
thing001.closePath();
thing001.stroke();
As you may have deduced, the moveTo does not draw, but is much like moving and putting the pen down at a point. From there; lineTo is used to draw a continuous series of lines, each starting where the last left off. We have used stroke (as in pen stroke) this time instead of fill.
Next, let's add an arc, filled with a gradient (shading from one color to another) to keep it interesting. In order to make the gradient transparent we first set a global transparancy (globalAlpha set to 0.5) and our canvas is now extended to 300 tall.
thing001.globalAlpha = 0.5;
thing001.beginPath();
thing001.arc(75,175,55,2,4,true);
gradObj = thing001.createLinearGradient(0,0,320,240,0.5);
gradObj.addColorStop(0.3, "#ff0000");
gradObj.addColorStop(0.6, "#0000ff");
thing001.fillStyle = gradObj;
thing001.fill();
There are six variables in arc. They are X, Y, radius, start angle, end angle, and anticlockwise (direction of rotation.) Angles are in radians, which is a unit of measure similar to degrees ( ...it's based on Pi, you remember? 3.141 aprox. Anyway, it's a convienient way to measure angles as it also gives the length of the arc itself. There are 2pi radians in a full circle. To convert from degrees, divide your angle measured in degrees by 360, then multiply by 2, and then multiply by 3.141 or more acureatly, by Pi.) Note that for the anticlockwise variable, true and false are used, with false indicating clockwise rotation for the angle.
Click here for the next tutorial on buttons.
|
