Super strategy for drawing rectangles using HTML5 Canvas API

Home

Web Front-end

H5 Tutorial

Super strategy for drawing rectangles using HTML5 Canvas API_html5 tutorial tips

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:45 PM

canvas html5 rectangle

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

JavaScript CodeCopy content to clipboard

"en">
"UTF-8">
"zh">
"UTF-8">
绘制矩形
"canvas-warp">
"canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

Run result:
2016321105129852.jpg (850×500)

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

"zh">
"UTF-8">
Draw a rectangle
"canvas-warp">
Your browser doesn’t support Canvas? ! Change it quickly! !

Run result:
2016321105204703.jpg (850×500)

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

"zh">
"UTF-8">
绘制矩形
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

Run result:
2016321105516457.jpg (850×500)

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.

JavaScript CodeCopy content to clipboard

var sum;
sum = 3 2;
alert(sum);
sum=7 8 ;
alert(sum);
.... //Repeat two lines of code

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:

JavaScript CodeCopy content to clipboard

function add2(a,b){
sum = a b;
alert(sum);
} // You only need to write it once
add2(3,2);
add2(7,8);
.... //Just call the function

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

JavaScript CodeCopy content to clipboard

function Function name ( )
{
Function body;
}

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. <div class="codeText"> <div class="codeHead"> JavaScript CodeCopy content to clipboard </div> <div id="code_6911"> <ol class="dp-c"> <li class="alt"><script> </li> <li> function tcon() </li> <li class="alt">{ </li> <li> alert("Congratulations on learning function calling!"); </li> <li class="alt">} </li> <li> tcon(); //Call the function and write the function name directly. </li> <li class="alt"></script>

Second case: Called in an HTML file, such as calling a defined function after clicking a button.

This situation will be used later.
The function
with parameters has the following format:

JavaScript CodeCopy content to clipboard

function Function name (parameter 1, parameter 2)
{
Function code
}

Note: There can be multiple parameters, increase or decrease the number of parameters as needed. Parameters are separated by (comma,).
According to this format, the function to implement the sum of any two numbers should be written as:

JavaScript CodeCopy content to clipboard

function add2(x,y)
{
sum = x y;
document.write(sum);
}

x and y are the two parameters of the function. When calling the function, we can pass the two actual addends to the function through these two parameters.
For example, add2(3,4) will find the sum of 3 4, and add2(60,20) will find the sum of 60 and 20.
Return value function

JavaScript CodeCopy content to clipboard

function add2(x,y)
{
sum = x y;
return sum; //Return function value, the value after return is called the return value.
}

The return here is the same as in other languages, but in weakly typed languages such as JS or AS, the return value type does not need to be written in the function declaration.

At this point, we have also systematically talked about JavaScript functions. Let’s get back to the topic~
We can also encapsulate our rectangle, the code is as follows:

JavaScript CodeCopy content to clipboard

"zh">
"UTF-8">
封装绘制矩形方法
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

运行结果：

使用rect()方法绘制矩形
犹豫绘制矩形是常用的方法，所以在Canvas API中已经帮我们封装好了一个绘制矩形的方法——rect()。这个方法接收4个参数x, y, width, height，实际调用时也就是

JavaScript Code复制内容到剪贴板

context.rect(x,y,width,height);

Based on this, let’s optimize the encapsulation method just now.

JavaScript CodeCopy content to clipboard

function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){
cxt.beginPath();
cxt.rect(x, y, width, height);
//cxt.closePath(); You don’t need closePath()
cxt.lineWidth = borderWidth;
cxt.strokeStyle = borderColor;
cxt.fillStyle = fillColor;
cxt.fill();
cxt.stroke();
}

Call the encapsulation method and draw a magical image
Create a magical image~
2016321105759647.jpg (500×375)

Okay, let’s use it to perform surgery, practice our hands, and move the muscles and bones in the way we just packaged it.

JavaScript CodeCopy content to clipboard

"zh">
"UTF-8">
绘制魔性图形
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

Run result:
2016321105841741.jpg (850×500)

Isn’t it very magical? Isn't it very cool? I won’t take the time to explain this code. You can think about it after class, or you can try to use the knowledge you have learned to draw a cool image. This lesson has a lot of content. In fact, it only introduces four properties and methods - closePath(), fillStyle, fill(), rect(), and an extended JavaScript function explanation.

Canvas achieves picture rounded corner effect
This rule applies to regular or irregular graphics drawn by various Canvas.

The key to achieving rounded corners in Canvas is to use "texture fill".

There is a method called createPattern in Canvas, which can convert picture elements of known sizes into texture objects for filling.

For example, if you implement the circular effect of a picture named test.jpg with a size of 100px * 100px, the main JS code is as follows:

JavaScript CodeCopy content to clipboard

// canvas element, picture element
var canvas = document.querySelector("#canvas"), image = new Image();
var context = canvas.getContext("2d");
image.onload = function() {
// Create image texture
var pattern = context.createPattern(image, "no-repeat");
//Draw a circle
context.arc(50, 50, 50, 0, 2 * Math.PI);
// Fill the drawn circle
context.fillStyle = pattern;
context.fill();
};
image.src = "test.jpg";

Just make the fillStyle attribute value of the Canvas context equal to this texture object.

The rectangle drawing API that comes with Canvas does not have rounded corner attributes. Therefore, the rounded rectangle in the demo uses a custom method. I took a quick look and found that it was a little fiddly to achieve different fillet sizes in the vertical and horizontal directions. For the purpose of demonstration, I didn’t go to great lengths, so the fillets in the demo were symmetrical.
2016321105911393.png (319×314)

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn