English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Due to the experience in HTML in the past two years5is very popular, so I studied it, I also have an idea that needs to use the relevant functions of HTML, so I also need to study hard.
I took a good look at the Canvas functions, felt that HTML5The interactive functions on the client side are becoming stronger and stronger, I took a look at Canvas drawing today, the following are several examples, remember them for future use.
1, use Canvas to draw a straight line:
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$ (id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.moveTo(20,30);//The first starting point
cans.lineTo(120,90);//The second point
cans.lineTo(220,60);//The third point (starting from the second point)
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
The two API methods used here, moveTo and lineTo, are the starting and ending coordinates of the line segment, the variables are (X coordinate, Y coordinate), strokeStyle, stroke are the style of path drawing and the path drawing.
2, draw gradient lines
Gradient lines are colors with gradient effects, of course, the gradient style can follow the path direction or not follow the path direction:
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$ (id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.moveTo(0,0);
cans.lineTo(400,300);
，We can create a gradient rectangle.1 = cans.createLinearGradient(0,0,400,300);//The starting and ending coordinates of linear gradients
,'green');10,0);//Create the starting color of the gradient, 0 represents the offset, personally understand it as the relative position on the line, the maximum is1, you can write any number of gradient colors in a gradient
,'green');1gnt1,'yellow');
cans.lineWidth=3;
cans.strokeStyle = gnt1;
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
3, draw rectangle or square:
This kind of rectangle frame if using HTML4can only be generated using background code, now HTML5The provided Canvas functions can be easily drawn, so HTML5Its superiority is quite high.
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$ (id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.fillStyle = 'yellow';
cans.fillStyle = gnt30,30,340,240);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
Here we use a method —— fillRect() as the literal meaning suggests, this is to fill a rectangle, the parameters are worth mentioning, fillRect(X, Y, Width, Height), which is different from the coordinates in mathematics, please see
Here X, Y are relative to the starting point of the top left corner of the Canvas, remember this!
4, draw a simple rectangle frame
In the previous example, it was mentioned that a rectangle block needs to be drawn, filled with color, this example simply draws a rectangle without implementing the filling effect.
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$ (id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.strokeStyle = 'red';
cans.strokeRect(30,30,340,240);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
This is very simple, just like the previous example, just replacing fill with stroke, details please see the previous example.
5, draw a linear gradient rectangle
Gradient is a quite good effect for filling, combined with instance2And instance3，我们可以创建一个渐变的矩形
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$ (id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
，We can create a gradient rectangle.1 var gnt10= cans.createLinearGradient(39,0,
,'green');10,0);
,'green');1.addColorStop(0,'red');5.addColorStop(0.
,'green');1gnt1.addColorStop(
,'blue');1;
cans.fillStyle = gnt10cans.fillRect(10cans.fillRect(380,280);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
,
6No explanation, just remember fillRect(X,Y,Width,Height).
、Fill a Circle
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$ (id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,true);
cans.closePath();
Circular shapes are widely used, of course, including ellipses.//cans.fillStyle = 'green';
Originally, red was used here, just take a screenshot, and I am afraid to be beaten by patriots on the street, actually you know~~
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
cans.fill();
The usage of the arc method here is arc(X,Y,Radius,startAngle,endAngle,anticlockwise), which means (X coordinate of the center of the circle, Y coordinate of the center of the circle, radius, start angle (radians), end angle (radians), whether to draw clockwise);
arc parameters comparison:200,150,10a、cans.arc(
c、cans.arc(200,150,100,0,Math.PI/20,0,Math.PI,true);/,true);[
c、cans.arc(200,150,100,0,Math.PI/2,true);
d、cans.arc(200,150,100,0,Math.PI/2,false);
7、Circular Block
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$ (id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,false);
cans.closePath();
cans.lineWidth = 5;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
This is not explained, it is the same as the example above, lineWidth controls the line width.
8、Circular Gradient
!doctype html
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$ (id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
var gnt = cans.createRadialGradient(200,300,50,200,200,200);
gnt.addColorStop(1,'red');
gnt.addColorStop(0,'green');
cans.fillStyle = gnt;
cans.fillRect(0,0,800,600);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="800px" height="600px">4</canvas>
</body>
</html>
It needs to be explained here that the createRadialGradient method has parameters (Xstart, Ystart, radiusStart, XEnd, YEnd, radiusEnd), which means that it uses two circles when implementing gradients: one is the original circle and the other is the gradient circle. In fact, this way of controlling style through coordinates and radius can achieve many effects, such as
3D Circle
var gnt = cans.createRadialGradient(200,150,0,200,50,250); gnt.addColorStop(0,'red'); gnt.addColorStop(1'#333');
That's all for this article. I hope it will be helpful to everyone's learning and that everyone will support the Yelling Tutorial more.
Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, does not edit the content manually, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report any violations, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.