HTML and CSS Reference
In-Depth Information
FiGure 28-4
drawing Lines
Drawing straight lines is a must-have for any fundamental drawing functionality. The basic tech-
nique for adding a line on the canvas is to:
First declare the starting point.
Set the ending point.
Define the stroke style.
Draw the line.
In code, these four steps correspond to the following lines:
myCanvas_context.moveTo(x,y);
myCanvas_context.lineTo(x,y);
myCanvas_context.strokeStyle = “#000”;
myCanvas_context.stroke();
Here's a specific example that draws a line from the lower-left of the canvas to the upper-right. To
achieve the effect shown in Figure 28-5, use this code:
<script type=”text/javascript”>
function doCanvas() {
var my_canvas = document.getElementById(“myCanvas”);
var myCanvas_context = my_canvas.getContext(“2d”);
myCanvas_context.moveTo(0,225);
myCanvas_context.lineTo(300,0);
myCanvas_context.strokeStyle = “#000”;
Search WWH ::




Custom Search