HTML and CSS Reference
In-Depth Information
context.lineTo(212,197);
context.lineTo(341,111);
context.lineTo(188,38);
context.closePath();
context.fill();
context.stroke();
context.fillStyle = "#ccc";
context.strokeStyle = "black";
context.beginPath();
context.moveTo(341,111);
context.lineTo(212,197);
context.lineTo(212,362);
context.lineTo(341,276);
context.lineTo(341,111);
context.closePath();
context.fill();
context.stroke();
context.fillStyle = "#999";
context.strokeStyle = "black";
context.beginPath();
context.moveTo(59,289);
context.lineTo(59,124);
context.lineTo(212,197);
context.lineTo(212,362);
context.lineTo(59,289);
context.closePath();
context.fill();
context.stroke();
}
</script>
</head>
<body>
<h1>
Canvas Perspective
</h1>
<canvas id="canvas" width="400" height="400">
<strong>
Canvas Supporting Browser Required
</strong>
</canvas>
</body>
</html>
O
NLINE
http://htmlref.com/ch2/canvascube.html
Drawing Arcs and Curves
Drawing on
canvas
isn't limited to simple lines; it is also possible to create curved lines
using
arc()
,
arcTo()
,
quadraticCurveTo()
, and
bezierCurveTo()
. To illustrate these
methods, this section shows how to draw a simple face.
You can use the
arc(
x
,
y
,
radius
,
startAngle
,
endAngle
,
counterclockwise
)
method to draw circles and parts of circles. Its location is defined by the point of its center
