- HTML5 Canvas Cookbook
- Eric Rowell
- 360字
- 2021-08-27 12:08:04
Drawing a zigzag
In this recipe, we'll introduce path drawing by iteratively connecting line subpaths to draw a zigzag path.
How to do it...
Follow these steps to draw a zigzag path:
- Define a 2D canvas context and initialize the zigzag parameters:
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var startX = 85; var startY = 70; var zigzagSpacing = 60; - Define the zigzag style and begin the path:
context.lineWidth = 10; context.strokeStyle = "#0096FF"; // blue-ish color context.beginPath(); context.moveTo(startX, startY); - Draw seven connecting zigzag lines and then make the zigzag path visible with
stroke():// draw seven lines for (var n = 0; n < 7; n++) { var x = startX + ((n + 1) * zigzagSpacing); var y; if (n % 2 == 0) { // if n is even... y = startY + 100; } else { // if n is odd... y = startY; } context.lineTo(x, y); } context.stroke(); }; - Embed the canvas tag inside the body of the HTML document:
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;"> </canvas>
How it works...
To draw a zigzag, we can connect alternating diagonal lines to form a path. Programmatically, this can be achieved by setting up a loop that draws diagonal lines moving upwards and to the right on odd iterations, and downwards and to the right on even iterations.
The key thing to pay attention to in this recipe is the beginPath() method. This method essentially declares that a path is being drawn, such that the end of each line sub path defines the beginning of the next sub path. Without using the beginPath() method, we would have to tediously position the canvas context using moveTo() for each line segment while ensuring that the ending points of the previous line segment match the starting point of the current line segment. As we will see in the next chapter, the beginPath() method is also a required step for creating shapes.
Notice how the connection between each line segment comes to a sharp point. This is because the line join style of the HTML5 canvas path is defaulted to miter. Alternatively, we could also set the line join style to round or bevel with the lineJoin property of the canvas context.
If your line segments are fairly thin and don't connect at steep angles, it can be somewhat difficult to distinguish different line join styles. Typically, different line join styles are more noticeable when the path thickness exceeds 5 px and the angle between line sub paths is relatively small.