MultiMedia: Difference between revisions
Jump to navigation
Jump to search
Line 64: | Line 64: | ||
| strokeText(text, x, y, maxWidth) || Draws text (with no fill) on the canvas. | | strokeText(text, x, y, maxWidth) || Draws text (with no fill) on the canvas. | ||
|} | |} | ||
== Text == | == Text == | ||
Revision as of 15:07, 11 December 2013
PictureBox: Drawing, text, images, sprites
The PictureBox control is a powerful container for images, drawing and text.
- Based on the HTML5 Canvas widget.
- Before you can output anything to a PictureBox, a context must be created:
pb = PictureBox1.getContext("2d")
- All drawing, images, etc. are done to the context.
- Declare the context variable globally if needed.
- There are really only 3 things you can do with a PictureBox: Everything else deals with the context:
getContext("2d") | Gets the drawing context. Returns the object that the PictureBox Context functions use. "2d" is currently the only valid argument. |
refresh() | Redraws the entire PictureBox. Required after resizing the box or scrolling. |
toDataURL(type) | Returns the current picturebox in a Base64 string image. If type is not specified, it is in PNG format. Type can also be "image/jpeg" or "image/gif". |
Drawing
- Here are some of the drawing commands.
- More are listed in the full documentation
arc(x, y, radius, startAngle, endAngle, counterclockwise) | Adds an arc to the current path using a radius and specified angles(in radians). | ||
arcTo(x1, y1, x2, y2, radius) | Adds an arc of a circle to the current sub path by using a radius and tangent points. | ||
beginPath() | Creates a new path in the canvas and sets the starting point to the coordinate (0,0). | ||
bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) | Adds a cubic Bezier's curve to the current sub path using two control points. | ||
clearRect(x, y, width, height) | Clears the specified rectangle region and makes it transparent. | ||
closePath() | Closes an open path and attempts to draw a straight line from the current point to starting point of the path. The use of closePath() is optional. | ||
fill() | Closes the current path and paints the area within it. | ||
fillRect(x, y, width, height) | Draws a filled rectangle. | ||
fillStyle | gradient|pattern | ||
lineCap | Sets style of end caps for a line. "butt", "round" or "square". | ||
lineJoin | Set style where two lines meet. "bevel", "round" or "mitre". | ||
lineWidth | The current line width, in pixels. | ||
lineTo(x, y) | Adds a line segment from the current point to the specified coordinate. The appearance of the line can be set by the following properties: fillStyle, strokeStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor |
rect(x, y, width, height) | Adds a rectangle. |
stroke() | Actually draws the path you have defined | ||
strokeRect(x, y, width, height) | Draws a rectangular outline. | ||
strokeStyle | gradient|pattern | ||
strokeText(text, x, y, maxWidth) | Draws text (with no fill) on the canvas. |