HTML and CSS Reference
In-Depth Information
myTriangle.lineTo(500, 10);
myTriangle.lineTo(10, 500);
myTriangle.lineTo(10, 10);
Figure 3.32 shows what the triangle will look like.
The following code shows how to present the triangle shape in
your web browser.
Figure 3.32 The lineTo property
allows you to draw lines in a
CANVAS image.
<!DOCTYPE html> <html lang=”en”>
<head> <meta charset=”utf-8”>
<title>Drawing a Rectangle</title>
<script type=”text/javascript”><!--
window.addEventListener('load', function () {
var elem = document.getElementById('myCanvas');
if (!elem || !elem.getContext) {
return;
}
var myTriangle = elem.getContext('2d');
if (!myTriangle) {
return;
}
myTriangle.fillStyle = “orange”;
myTriangle.strokeStyle = “yellow”;
myTriangle.lineWidth = 7;
myTriangle.beginPath();
myTriangle.moveTo(10, 10);
myTriangle.lineTo(500, 10);
myTriangle.lineTo(10, 500);
myTriangle.lineTo(10, 10);
myTriangle.fill();
myTriangle.stroke();
myTriangle.closePath();
}, false);
// --></script>
</head> <body style=”background-color:#000;”>
<canvas id=”myCanvas” width=”500” height=”500”>
</canvas>
</body> </html>
Using the lineTo property allows you to draw simple, line-
based shapes.
Creating Arcs
When you want to draw a circle you use the Arc method. An arc
is drawn with six different properties:
• X—thecoordinatesforthecircle'scenteralongtheXaxis.
• Y—thecoordinatesforthecircle'scenteralongtheYaxis.
Search WWH ::




Custom Search