HTML5 Canvas basic line drawing example tutorial_html5 tutorial skills

How to draw lines? It’s almost the same as painting in reality:
1. Move the brush to the beginning of the painting
2. Determine the stopping point of the first stroke
3. After planning, select the brush (including the Thickness and color, etc.)
4. Confirm drawing

Because Canvas is based on state drawing (very important, will be explained later), the first few steps are to determine the state, and the final step will be the specific drawing.
1. Move the brush (moveTo())
We obtained the brush context before, so we take this as an example to give an example of using the modified method - context.moveTo(100,100). The meaning of this code is to move the brush to the point (100,100) (unit is px). Remember, the upper left corner of the canvas is the origin of the Cartesian coordinate system, and the positive direction of the y-axis is downward and the positive direction of the x-axis is to the right.
2. Stroke stop point (lineTo())
Similarly, context.lineTo(600,600). This sentence means to draw from the stopping point of the previous stroke to (600,600). But be clear, the moveTo() and lineTo() here are just status, it’s planning, I’m preparing to draw, I haven’t started drawing yet, it’s just a plan!
3. Select the brush
Here we only set the color and thickness of the brush.
context.lineWidth = 5, this sentence means to set the thickness of the brush (line) to 10px.
context.strokeStyle = "#AA394C", this sentence means to set the color of the brush (line) to rose red.
Because Canvas is state-based drawing, when we select the brush thickness and color, we actually also select the line thickness and color.
4. Confirm drawing
There are only two methods to confirm drawing, fill() and stroke(). Those with some basic knowledge of drawing should know that the former refers to filling and the latter refers to stroke. Since we're just drawing lines, just stroke them. Just call the code context.stroke().

Draw a line
Isn’t it just a line segment! So much nonsense! Then let's start painting.

JavaScript CodeCopy content to clipboard

2. "zh">
4. "UTF-8">
8. "canvas-warp">
9. "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">
10. Your browser doesn’t support Canvas? ! Change it quickly! !

<script> </span></li> <li class="alt"> <span> window.onload = </span><span class="keyword">function</span><span>(){ </span> </li> <li> <span> </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span> </li> <li class="alt"><span> canvas.width = 800; </span></li> <li><span> canvas.height = 600; </span></li> <li class="alt"> <span> </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>); </span> </li> <li><span> </span></li> <li class="alt"><span> context.moveTo(100,100); </span></li> <li><span> context.lineTo(600,600); </span></li> <li class="alt"><span> context.lineWidth = 5; </span></li> <li> <span> context.strokeStyle = </span><span class="string">"#AA394C"</span><span>; </span> </li> <li class="alt"><span> context.stroke(); </span></li> <li><span> } </span></li> <li class="alt"><span></script>

Run result:

(My friends have always asked me what the bear is in the lower right corner of the page? Oh, I forgot to explain before, that is my anti-counterfeiting watermark!)
I also marked a page analysis diagram for your reference. .

Here I removed the width and height from the original tag, but set the width and height attributes of the canvas object in the JavaScript code.

Summary: To set the size of the canvas, there are only two methods

1. Set in the tag;

2. Set the properties of canvas in JS code.

How about it? Isn’t it very cool? Next we have to speed up and draw a graphic composed of multiple lines. Do you feel like you are one step closer to being an artist? Although this is just a simple line segment, this painting is only a small step for us, but it is a giant leap for mankind!

Drawing a polyline
We have successfully drawn a line segment above. So, what if I want to draw a polyline with two strokes or even many strokes?
Smart friends must have thought of it. This is not simple. Just reuse lineTo(). Next, I just drew a beautiful polyline~

JavaScript CodeCopy content to clipboard

2. "zh">
4. "UTF-8">
8. "canvas-warp">
9. "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">
10. Your browser doesn’t support Canvas? ! Change it quickly! !

<script> </span></li> <li class="alt"> <span> window.onload = </span><span class="keyword">function</span><span>(){ </span> </li> <li> <span> </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span> </li> <li class="alt"><span> canvas.width = 800; </span></li> <li><span> canvas.height = 600; </span></li> <li class="alt"> <span> </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>); </span> </li> <li><span> </span></li> <li class="alt"><span> context.moveTo(100,100); </span></li> <li><span> context.lineTo(300,300); </span></li> <li class="alt"><span> context.lineTo(100,500); </span></li> <li><span> context.lineWidth = 5; </span></li> <li class="alt"> <span> context.strokeStyle = </span><span class="string">"#AA394C"</span><span>; </span> </li> <li><span> context.stroke(); </span></li> <li class="alt"><span> } </span></li> <li><span></script>