canvas Knowledge Summary
- 2021-07-13 04:29:51
- OfStack
1. Basic knowledge
There are two ways to draw images with canvas elements, which are
context.fill()// Padding
context.stroke()// Draw a border style: Before drawing, set the drawing style
context.fillStyle// Style of filling
context.strokeStyle// Border style
context.lineWidth// Graphic border width context. arc (centerx center transverse left, centery center ordinate, radius radius, startingAngle starting radian value, endingAngle ending radian value, anticlockwise = 'false' clockwise default false)
2. Draw unfilled line segments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<link rel="stylesheet" href="styles/lianxi.css">
<script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<script src="scripts/lianxi.js"></script>
<!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" 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>
window.onload=function(){
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
canvas.width=300;
canvas.height=300;
ctx.beginPath(); //1 Start with a painting
ctx.moveTo(50,50);// Segment starting point
ctx.lineTo(100,100);// End point 1
ctx.lineTo(50,100);// End point 2
ctx.lineTo(50,50);// End point 3
ctx.lineWidth=5;// Border width
ctx.strokeStyle="red"; // Border style
ctx.closePath(); //1 End of painting
ctx.stroke();// Draw a line segment
}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 id="canvas"> The current browser does not support it, please change the browser </canvas>
</body>
</html>
3. Draw fill graphics
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<link rel="stylesheet" href="styles/lianxi.css">
<script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<script src="scripts/lianxi.js"></script>
<!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" 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>
window.onload=function(){
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
canvas.width=300;
canvas.height=300;
ctx.beginPath(); //1 Start with a painting
ctx.moveTo(50,50);// Segment starting point
ctx.lineTo(100,100);// End point 1
ctx.lineTo(50,100);// End point 2
ctx.lineTo(50,50);// End point 3
ctx.fillStyle='red';
ctx.fill();
// Border addition
ctx.lineWidth=5;// Border width
ctx.strokeStyle="blue"; // Border style
ctx.closePath(); //1 End of painting
ctx.stroke();// Draw a line segment
}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 id="canvas"> The current browser does not support it, please change the browser </canvas>
</body>
</html>
Step 4 Draw an arc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<link rel="stylesheet" href="styles/lianxi.css">
<script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<script src="scripts/lianxi.js"></script>
<!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" 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>
window.onload=function(){
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
canvas.width=800;
canvas.height=800;
ctx.beginPath(); // Begin 1 A new painting
ctx.lineWidth=5;// Border width
ctx.strokeStyle="red"; // Border style
ctx.arc(100, 100, 30, 0, 1.5*Math.PI);
ctx.closePath(); //1 The painting ends, and if the painting is not closed, it will be closed
ctx.stroke();// Draw a line segment
ctx.beginPath(); // Begin 1 A new painting
ctx.lineWidth=5;// Border width
ctx.strokeStyle="red"; // Border style
ctx.arc(200, 100, 30, 0, 2*Math.PI);
ctx.closePath(); //1 The painting ends, and if the painting is not closed, it will be closed
ctx.stroke();// Draw a line segment
ctx.beginPath(); // Begin 1 A new painting
ctx.lineWidth=5;// Border width
ctx.strokeStyle="red"; // Border style
ctx.arc(300, 100, 30, 0, 0.5*Math.PI);
ctx.closePath(); //1 The painting ends, and if the painting is not closed, it will be closed
ctx.stroke();// Draw a line segment
ctx.beginPath(); // Begin 1 A new painting
ctx.lineWidth=5;// Border width
ctx.strokeStyle="red"; //1 The painting ends, and if the painting is not closed, it will be closed
ctx.arc(400, 100, 30, 0, 0.5*Math.PI,true);// Note: 0*PI , 0.5*PI , 1*PI , 1 . 5*PI , 2*PI The position occupied is fixed
ctx.closePath(); //1 End of painting
ctx.stroke();// Draw a line segment
ctx.beginPath(); // Begin 1 A new painting
ctx.fillStyle="red"; // Border style
ctx.arc(500, 100, 30, 0, 1.5*Math.PI);
ctx.closePath(); //1 The painting ends, and if the painting is not closed, it will be closed
ctx.fill();// Drawing fill
ctx.beginPath(); // Begin 1 A new painting
ctx.lineWidth=5;// Border width
ctx.strokeStyle="red"; // Border style
ctx.arc(600, 100, 30, 0, 1.5*Math.PI);
ctx.stroke();// Draw a line segment
}else{
alert(' The current browser does not support it, please change the browser ');
}
}
draw();
}
</script>
</head>
<body>
<canvas id="canvas"> The current browser does not support it, please change the browser </canvas>
</body>
</html>
5. Draw a rectangle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<link rel="stylesheet" href="styles/lianxi.css">
<script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<script src="scripts/lianxi.js"></script>
<!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" 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>
window.onload=function(){
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
canvas.width=500;
canvas.height=500;
ctx.fillRect(25,25,100,100);// Draw 1 Filled rectangles
ctx.clearRect(45,45,60,60);// Clears the specified rectangular area, making the cleared part completely transparent
ctx.strokeRect(50,50,50,50); // Draw 1 A rectangular border
}else{
alert(' The current browser does not support it, please change the browser ');
}
}
draw();
}
</script>
</head>
<body>
<canvas id="canvas"> The current browser does not support it, please change the browser </canvas>
</body>
</html>
6. Draw text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<link rel="stylesheet" href="styles/lianxi.css">
<script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<script src="scripts/lianxi.js"></script>
<!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" 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>
window.onload=function(){
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
canvas.width=500;
canvas.height=500;
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
}else{
alert(' The current browser does not support it, please change the browser ');
}
}
draw();
}
</script>
</head>
<body>
<canvas id="canvas"> The current browser does not support it, please change the browser </canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<link rel="stylesheet" href="styles/lianxi.css">
<script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<script src="scripts/lianxi.js"></script>
<!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" 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>
window.onload=function(){
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
canvas.width=500;
canvas.height=500;
ctx.font = "48px serif";
ctx.strokeText("Hello world", 10, 50);
}else{
alert(' The current browser does not support it, please change the browser ');
}
}
draw();
}
</script>
</head>
<body>
<canvas id="canvas"> The current browser does not support it, please change the browser </canvas>
</body>
</html>
7. Picture manipulation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<link rel="stylesheet" href="styles/lianxi.css">
<script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<script src="scripts/lianxi.js"></script>
<!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" 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>
window.onload=function(){
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
canvas.width=500;
canvas.height=500;
var img=new Image();
img.src='http://gzdl.cooco.net.cn/files/down/test/imggzdl/312/15812.jpg'
img.onload=function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
}else{
alert(' The current browser does not support it, please change the browser ');
}
}
draw();
}
</script>
</head>
<body>
<canvas id="canvas"> The current browser does not support it, please change the browser </canvas>
</body>
</html>