1. Basic knowledge
There are two ways to draw an image by the canvas element:
()//filling ()//Draw borders
style: Before drawing the graphic, set the drawing style
//Filling style //Border style //Graphic border width
(Centerx center horizontal left, center center vertical coordinate, radius radius, starting Angle starting radian value, endingAngle end radian value, anticlockwise='false' default default)
2. Draw non-fillable segments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/content/v1/styles/">
<link rel="stylesheet" href="styles/">
<script src="/content/v1/scripts/"></script>
<script src="scripts/"></script>
<!--[if lt IE 9]><script src="///content/libs/"></script><![endif]-->
<!--[if IE 6]><script src="///content/libs/dd_belatedpng_0.0." type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<style type="text/css">
.canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
</style>
<script>
=function(){
function draw(){
var canvas = ('canvas');
if (){
var ctx = ('2d');
=300;
=300;
(); //A painting begins (50,50);//The starting point of the line segment (100,100);//End point 1 (50,100);//End Point 2 (50,50);//End point 3 =5;//Border width ="red"; //Border style (); //A painting ends ();//Draw line segments }else{
alert('The current browser does not support it, please change the browser');
}
}
draw();
}
</script>
<style tyrp="text/css">
canvas{ border: 1px solid black;margin: 0 auto;display: block;}
</style>
</head>
<body>
<canvas >The current browser does not support it，Please change your browser</canvas>
</body>
</html>
3. Draw filler graphics
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/content/v1/styles/">
<link rel="stylesheet" href="styles/">
<script src="/content/v1/scripts/"></script>
<script src="scripts/"></script>
<!--[if lt IE 9]><script src="///content/libs/"></script><![endif]-->
<!--[if IE 6]><script src="///content/libs/dd_belatedpng_0.0." type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<style type="text/css">
.canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
</style>
<script>
=function(){
function draw(){
var canvas = ('canvas');
if (){
var ctx = ('2d');
=300;
=300;
(); //A painting begins (50,50);//The starting point of the line segment (100,100);//End point 1 (50,100);//End Point 2 (50,50);//End point 3 ='red';
();
//Add border =5;//Border width ="blue"; //Border style (); //A painting ends ();//Draw line segments }else{
alert('The current browser does not support it, please change the browser');
}
}
draw();
}
</script>
<style tyrp="text/css">
canvas{ border: 1px solid black;margin: 0 auto;display: block;}
</style>
</head>
<body>
<canvas >The current browser does not support it，Please change your browser</canvas>
</body>
</html>
4. Draw an arc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/content/v1/styles/">
<link rel="stylesheet" href="styles/">
<script src="/content/v1/scripts/"></script>
<script src="scripts/"></script>
<!--[if lt IE 9]><script src="///content/libs/"></script><![endif]-->
<!--[if IE 6]><script src="///content/libs/dd_belatedpng_0.0." type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<style type="text/css">
canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
</style>
<script>
=function(){
function draw(){
var canvas = ('canvas');
if (){
var ctx = ('2d');
=800;
=800;
(); //Start a new painting =5;//Border width ="red"; //Border style (100, 100, 30, 0, 1.5*);
(); //A painting ends, if the painting is not closed, it will be closed ();//Draw line segments (); //Start a new painting =5;//Border width ="red"; //Border style (200, 100, 30, 0, 2*);
(); //A painting ends, if the painting is not closed, it will be closed ();//Draw line segments
(); //Start a new painting =5;//Border width ="red"; //Border style (300, 100, 30, 0, 0.5*);
(); //A painting ends, if the painting is not closed, it will be closed ();//Draw line segments (); //Start a new painting =5;//Border width ="red"; //A painting ends, if the painting is not closed, it will be closed (400, 100, 30, 0, 0.5*,true);//Note: 0*PI, 0.5*PI, 1*PI, 1.5*PI, 2*PI occupies a fixed position (); //A painting ends ();//Draw line segments (); //Start a new painting ="red"; //Border style (500, 100, 30, 0, 1.5*);
(); //A painting ends, if the painting is not closed, it will be closed ();//Draw fill
(); //Start a new painting =5;//Border width ="red"; //Border style (600, 100, 30, 0, 1.5*);
();//Draw line segments }else{
alert('The current browser does not support it, please change the browser');
}
}
draw();
}
</script>
</head>
<body>
<canvas >The current browser does not support it，Please change your browser</canvas>
</body>
</html>
5. Draw a rectangle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/content/v1/styles/">
<link rel="stylesheet" href="styles/">
<script src="/content/v1/scripts/"></script>
<script src="scripts/"></script>
<!--[if lt IE 9]><script src="///content/libs/"></script><![endif]-->
<!--[if IE 6]><script src="///content/libs/dd_belatedpng_0.0." type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<style type="text/css">
canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
</style>
<script>
=function(){
function draw(){
var canvas = ('canvas');
if (){
var ctx = ('2d');
=500;
=500;
(25,25,100,100);//Draw a fill rectangle (45,45,60,60);//Clear the specified rectangular area so that the cleared part is completely transparent (50,50,50,50); //Draw a rectangle border }else{
alert('The current browser does not support it, please change the browser');
}
}
draw();
}
</script>
</head>
<body>
<canvas >The current browser does not support it，Please change your browser</canvas>
</body>
</html>
6. Draw text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/content/v1/styles/">
<link rel="stylesheet" href="styles/">
<script src="/content/v1/scripts/"></script>
<script src="scripts/"></script>
<!--[if lt IE 9]><script src="///content/libs/"></script><![endif]-->
<!--[if IE 6]><script src="///content/libs/dd_belatedpng_0.0." type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<style type="text/css">
canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
</style>
<script>
=function(){
function draw(){
var canvas = ('canvas');
if (){
var ctx = ('2d');
=500;
=500;
= "48px serif";
("Hello world", 10, 50);
}else{
alert('The current browser does not support it, please change the browser');
}
}
draw();
}
</script>
</head>
<body>
<canvas >The current browser does not support it，Please change your browser</canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/content/v1/styles/">
<link rel="stylesheet" href="styles/">
<script src="/content/v1/scripts/"></script>
<script src="scripts/"></script>
<!--[if lt IE 9]><script src="///content/libs/"></script><![endif]-->
<!--[if IE 6]><script src="///content/libs/dd_belatedpng_0.0." type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<style type="text/css">
canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
</style>
<script>
=function(){
function draw(){
var canvas = ('canvas');
if (){
var ctx = ('2d');
=500;
=500;
= "48px serif";
("Hello world", 10, 50);
}else{
alert('The current browser does not support it, please change the browser');
}
}
draw();
}
</script>
</head>
<body>
<canvas >The current browser does not support it，Please change your browser</canvas>
</body>
</html>
7. Picture operation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/content/v1/styles/">
<link rel="stylesheet" href="styles/">
<script src="/content/v1/scripts/"></script>
<script src="scripts/"></script>
<!--[if lt IE 9]><script src="///content/libs/"></script><![endif]-->
<!--[if IE 6]><script src="///content/libs/dd_belatedpng_0.0." type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<style type="text/css">
canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
</style>
<script>
=function(){
function draw(){
var canvas = ('canvas');
if (){
var ctx = ('2d');
=500;
=500;
var img=new Image();
='/files/down/test/imggzdl/312/'
=function(){
(img,0,0);
();
(30,96);
(70,66);
(103,76);
(170,15);
();
}
}else{
alert('The current browser does not support it, please change the browser');
}
}
draw();
}
</script>
</head>
<body>
<canvas >The current browser does not support it，Please change your browser</canvas>
</body>
</html>
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!