Home > Web Front-end > H5 Tutorial > Super strategy for drawing rectangles using HTML5 Canvas API_html5 tutorial tips

Super strategy for drawing rectangles using HTML5 Canvas API_html5 tutorial tips

WBOY

Release： 2016-05-16 15:45:35

Original

1921 people have browsed it

Use closePath() to close the shape
First we draw a rectangle using the most common method.

JavaScript CodeCopy content to clipboard

1.   
2. "en">   
3.   
4.     "UTF-8">   
5.        
6. 
   
     
7.   
8.   
9. "zh">   
10.   
11.     "UTF-8">   
12.        
13. 
    
      
14.   
15. "canvas-warp">   
16.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
17.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
18.        

  

  

<script>   </span></li> <li> <span>    window.onload = </span><span class="keyword">function</span><span>(){   </span> </li> <li class="alt"> <span>        </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>);   </span> </li> <li><span>        canvas.width = 800;   </span></li> <li class="alt"><span>        canvas.height = 600;   </span></li> <li> <span>        </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>);   </span> </li> <li class="alt"><span>  </span></li> <li><span>        context.beginPath();   </span></li> <li class="alt"><span>        context.moveTo(150,50);   </span></li> <li><span>        context.lineTo(650,50);   </span></li> <li class="alt"><span>        context.lineTo(650,550);   </span></li> <li><span>        context.lineTo(150,550);   </span></li> <li class="alt"> <span>        context.lineTo(150,50);     </span><span class="comment">//绘制最后一笔使图像闭合 </span><span>  </span> </li> <li><span>        context.lineWidth = 5;   </span></li> <li class="alt"> <span>        context.strokeStyle = </span><span class="string">"black"</span><span>;   </span> </li> <li><span>        context.stroke();   </span></li> <li class="alt"><span>  </span></li> <li><span>    }   </span></li> <li class="alt"><span></script>   

  

  

  

  

Run result:

At first glance, there is nothing wrong with it, but children's shoes with good eyesight have discovered that there is a problem when the last stroke is closed, resulting in a gap in the upper left corner. This situation is caused by setting lineWidth. If the default is 1 stroke, there will be no problem. But the larger the strokes and the wider the lines, the more obvious this gap will be. So how to avoid this situation?
The title has already spoiled it, use clothPath() to close the shape.

JavaScript CodeCopy content to clipboard

2. "zh">
4. "UTF-8">
6. 
   
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.beginPath(); </span></li> <li><span> context.moveTo(150,50); </span></li> <li class="alt"><span> context.lineTo(650,50); </span></li> <li><span> context.lineTo(650,550); </span></li> <li class="alt"><span> context.lineTo(150,550); </span></li> <li> <span> context.lineTo(150,50); </span><span class="comment">//You don’t need to draw the last stroke </span><span> </span> </li> <li class="alt"> <span> context.closePath(); </span><span class="comment">//Use closePath() to close the graphic </span><span> </span> </li> <li><span> </span></li> <li class="alt"><span> context.lineWidth = 5; </span></li> <li> <span> context.strokeStyle = </span><span class="string">"black"</span><span>; </span> </li> <li class="alt"><span> context.stroke(); </span></li> <li><span> </span></li> <li class="alt"><span> } </span></li> <li><span></script>

Run result:

In this example, combined with the explanation in the previous lesson, we know that when drawing a path, we need to wrap the planned path with beginPath() and closePath(). Of course, you don't need to draw the last stroke, just use closePath() directly, and it will automatically close it for you. (So ​​if you don’t want to draw a closed shape, you can’t use closePath())

Color the rectangle
Here we will introduce a method fill() that is equally important as stroke(). Just like the original stroke, before filling, we must first use the fillStyle attribute to select the color to be filled.
For example, if we want to color the rectangle above yellow, we can write it like this.

JavaScript CodeCopy content to clipboard

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6. 
   
     
7.   
8. "canvas-warp">   
9.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
11.        

  

  

<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.beginPath();   </span></li> <li><span>        context.moveTo(150,50);   </span></li> <li class="alt"><span>        context.lineTo(650,50);   </span></li> <li><span>        context.lineTo(650,550);   </span></li> <li class="alt"><span>        context.lineTo(150,550);   </span></li> <li> <span>        context.lineTo(150,50);     </span><span class="comment">//最后一笔可以不画 </span><span>  </span> </li> <li class="alt"> <span>        context.closePath();        </span><span class="comment">//使用closePath()闭合图形 </span><span>  </span> </li> <li><span>  </span></li> <li class="alt"> <span>        context.fillStyle = </span><span class="string">"yellow"</span><span>;   </span><span class="comment">//选择油漆桶的颜色 </span><span>  </span> </li> <li><span>        context.lineWidth = 5;   </span></li> <li class="alt"> <span>        context.strokeStyle = </span><span class="string">"black"</span><span>;   </span> </li> <li><span>  </span></li> <li class="alt"> <span>        context.fill();                 </span><span class="comment">//确定填充 </span><span>  </span> </li> <li><span>        context.stroke();   </span></li> <li class="alt"><span>  </span></li> <li><span>    }   </span></li> <li class="alt"><span></script>   

  

  

  

  

  

Run result:

What needs to be noted here is a good coding practice. Because as mentioned before, Canvas is state-based drawing, and drawing is determined only when stroke() and fill() are called. So we're going to put these two lines of code at the end, and the rest of the state setting code before them, to separate the state setting from the code that determines the draw. Improve code readability.

Encapsulated drawing method
You must have discovered that drawing a rectangle actually involves four strokes like this. Every time we use this stupid method to draw a rectangle, we have to draw these four strokes. How much trouble if we have to spend 10 rectangles? 100? 1,000? If written like this, the code will be bloated and the reusability will be very low. Here, we can use JavaScript to encapsulate these methods. We know that a rectangle can be uniquely determined by the coordinates of its upper left corner and its length and width.
JavaScript Function
Here we introduce JavaScript functions. If you have basic knowledge, you can skip this section and go directly to the following sections.
JavaScript and ActionScript language function declaration calls are the simplest among programming languages.
The role of function
The role of function is to write code once and then reuse this code repeatedly. For example: we want to complete the function of multiple sets of sums.

If you want to implement the sum of 8 groups of numbers, you will need 16 lines of code. The more you implement, the more lines of code you will need. Therefore, we can put the code block that performs a specific function into a function and call this function directly, saving the trouble of repeatedly entering a large amount of code.
Use functions to complete:

Define function
How to define a function? Take a look at the format below:

function is the keyword that defines a function, "function name" is the name you give the function, and "function body" is replaced with the code that completes the specific function.
Function call
After a function is defined, it cannot be executed automatically. You need to call it and write the function name directly in the required position. There are generally two ways:

Case 1: Called within the <script> tag. </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">JavaScript Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_6911')">Copy content to clipboard</span> </div> <div id="code_6911"> <ol class="dp-c"> <li class="alt"><span><span><script> </span></span></li> <li> <span></span><span class="keyword">function</span><span> tcon() </span> </li> <li class="alt"><span>{ </span></li> <li> <span> alert(</span><span class="string">"Congratulations on learning function calling!"</span><span>); </span> </li> <li class="alt"><span>} </span></li> <li> <span>tcon(); </span><span class="comment">//Call the function and write the function name directly. </span><span> </span> </li> <li class="alt"><span></script>