Difference between revisions of "Drawing Pictures"
From CodeStuff
(Created page with " <edcode> drawRectangle(200,400,300,300); drawLine(200,400,350,200); drawLine(350,200,500,400); </edcode>") |
|||
| Line 1: | Line 1: | ||
| + | You can draw on the canvas very easily. You can draw using these commands | ||
| + | ;setColour(colour) | ||
| + | : sets the colour of the next thing to be drawn. Colour names that your browser should know can be found at http://en.wikipedia.org/wiki/X11_color_names#Color_name_charts | ||
| + | |||
| + | <i>examples</i> | ||
| + | setColour("red"); | ||
| + | setColour("green"); | ||
| + | setColour("#FF0080"); | ||
| + | |||
| + | ;drawLine(x1,y1,x2,y2) | ||
| + | : draws a straight line from x1,y1 to x2,y2 | ||
| + | |||
| + | <i>examples</i> | ||
| + | drawLine(50,10,300,240); | ||
| + | drawLine(40,30,10,10); | ||
| + | drawLine(ax,bx,ax+10,bx+32); | ||
| + | |||
| + | ;drawCircle(centerX,centerY,radius); | ||
| + | : draws a circle centered at centerX,centerY with a size of radius. | ||
| + | |||
| + | <i>examples</i> | ||
| + | drawCircle(30,150,10); | ||
| + | drawCircle(400,150,100); | ||
| + | |||
| + | ;fillCircle(centerX,centerY,radius); | ||
| + | : identical to drawCircle except the circle is filled with color rather than just an outline. | ||
| + | |||
| + | ;drawRectangle(left,top,width,height); | ||
| + | : draws a rectangle with the top-left corner at left,top and a size of width and height. | ||
| + | |||
| + | <i>examples</i> | ||
| + | drawRectangle(300,15,20,10); | ||
| + | drawRectangle(0,0,300,200); | ||
| + | |||
| + | ;fillRectangle(left,top,width,height); | ||
| + | : identical to drawRectangle except the rectangle is filled width color rather than just an outline. | ||
<edcode> | <edcode> | ||
| − | drawRectangle(200, | + | // lines beginning with // do not act as part of the program |
| + | |||
| + | setColour("skyblue"); | ||
| + | fillRectangle(0,0,640,260); | ||
| + | |||
| + | setColour("green"); | ||
| + | fillRectangle(0,260,640,500); | ||
| + | |||
| + | setColour("white"); | ||
| + | drawRectangle(200,200,250,250); | ||
| + | |||
| + | drawLine(200,200,325,50); | ||
| + | drawLine(325,50,450,200); | ||
| + | |||
| + | drawRectangle(300,300,100,150); | ||
| + | |||
| + | drawCircle(375,375,10); | ||
| + | |||
| + | setColour("yellow"); | ||
| + | fillCircle(60,60,80); | ||
| + | |||
| + | setColour("black"); | ||
| + | print("My Home",280+2,220+2); | ||
| − | + | setColour("white"); | |
| − | + | print("My Home",280,220); | |
</edcode> | </edcode> | ||
Revision as of 22:29, 30 January 2012
You can draw on the canvas very easily. You can draw using these commands
- setColour(colour)
- sets the colour of the next thing to be drawn. Colour names that your browser should know can be found at http://en.wikipedia.org/wiki/X11_color_names#Color_name_charts
examples
setColour("red");
setColour("green");
setColour("#FF0080");
- drawLine(x1,y1,x2,y2)
- draws a straight line from x1,y1 to x2,y2
examples
drawLine(50,10,300,240); drawLine(40,30,10,10); drawLine(ax,bx,ax+10,bx+32);
- drawCircle(centerX,centerY,radius);
- draws a circle centered at centerX,centerY with a size of radius.
examples
drawCircle(30,150,10); drawCircle(400,150,100);
- fillCircle(centerX,centerY,radius);
- identical to drawCircle except the circle is filled with color rather than just an outline.
- drawRectangle(left,top,width,height);
- draws a rectangle with the top-left corner at left,top and a size of width and height.
examples
drawRectangle(300,15,20,10); drawRectangle(0,0,300,200);
- fillRectangle(left,top,width,height);
- identical to drawRectangle except the rectangle is filled width color rather than just an outline.
