Canvas Series II: Canvas Intermediate
First, draw a rectangle
[Summary] Several methods for drawing rectangles
- context object.strokeRect
- context object.fillRect
- context object.rect
- The rect method is a rectangular path, and you need to use fill or stroke to see the effect, so you can generally use strokeRect or fillRect to see the result directly.
[1] Draw a rectangular frame
语法：
context对象.strokeRect(x,y,width,height)
Parameter description:
The first two parameters represent the coordinates of the upper left corner of the drawing rectangle, and the last two parameters represent the width and height of the rectangle.
Using this method does not need to use the moveTo method to set the starting point or call painting methods such as stroke.
The drawn rectangle supports strokeStyle to set the color style.
[2] Draw a filled rectangle
语法:
context对象.fillRect(x,y,width,height)
Parameter description:
The first two parameters represent the coordinates of the upper left corner of the drawing rectangle, and the last two parameters represent the width and height of the rectangle.
Using this method does not need to use the moveTo method to set the starting point or call painting methods such as stroke.
The drawn rectangle supports fillStyle to set the color style.
【3】Clear the rectangular area
语法：
context对象.clearRect(x,y,width,height)
Parameter description:
The parameters x, y represent the coordinates of the upper left corner of the rectangular area, and width and height represent the width and height of the rectangular area.
Used to clear the contents of a rectangular area in the canvas.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制矩形</title>
</head>
<body>
<canvas id="canvas" width="800" height="800">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
<script type="text/javascript">
//第一步、获取canvas对象
var canvas = document.querySelector('#canvas');
//第二步、获取上下文
var ctx = canvas.getContext('2d');
//第三步、绘制矩形
ctx.strokeStyle = 'red';
ctx.strokeRect(10,10,200,100);
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.fillRect(300,300,200,100);
ctx.clearRect(350,350,50,50);
</script>
</body>
</html>2. Drawing a circle
【1】Draw an arc
语法：
context对象.arc( x,y,radius,startAngle,endAngle,anticlockwise)
context对象.arcTo()
Parameter description:
The first two parameters x, y represent the coordinates of the center of the drawn arc.
The parameter radius represents the arc radius, in radians.
The parameters startAngle and endAngle represent the angle from the start to the end. The angle is 0 radians to the right from the horizontal, and the positive direction is clockwise.
The parameter anticlockwise indicates whether to adopt the default forward angle, and if true is passed in, it indicates that the reverse pointer is positive. This parameter is optional.
使用arc绘图的时候,若没有设置moveTo，那么会从开始绘弧的地方作为起始点，若设置了moveTo,那么会连线该点与圆弧的起点。
如果使用stroke方法, 那么会从开始连线到圆弧的起始位置。如果是fill方法,会自动闭合路径填充。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制圆弧</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
<script type="text/javascript">
//第一步、获取canvas对象
var canvas = document.querySelector('#canvas');
//第二步、获取上下文
var ctx = canvas.getContext('2d');
//第三步、绘制圆弧
ctx.arc(300,300,100,Math.PI/2,Math.PI);
ctx.stroke();
</script>
</body>
</html>[2] Draw a fan
绘制扇形的重点是需要设置起始位置为圆心点, 然后闭合路径即可。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制扇形</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
<script type="text/javascript">
//第一步、获取canvas对象
var canvas = document.querySelector('#canvas');
//第二步、获取上下文
var ctx = canvas.getContext('2d');
//第三步、绘制扇形
ctx.moveTo(300,300);
ctx.arc(300,300,100,Math.PI/2,Math.PI);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>[3] Draw a fan
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制扇形动画</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
<script type="text/javascript">
//第一步、获取canvas对象
var canvas = document.querySelector('#canvas');
//第二步、获取上下文
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
//第三步、绘制扇形动画
var x = 500;
var y = 500;
var r = 100;
var startAngle = -Math.PI/2;
var angle = startAngle;
var s = setInterval(function(){
ctx.clearRect( 0, 0, canvas.width, canvas.height );
angle += 0.1;
if(angle >= Math.PI*3/2){
clearInterval(s);
angle = Math.PI * 3 / 2;
console.log('动画绘制完成');
}
ctx.moveTo(x,y);
ctx.arc(x,y,r,startAngle,angle);
ctx.fill();
},50);
</script>
</body>
</html>【4】Draw a pie chart
The biggest feature of drawing a pie chart is that the angles are superimposed.
Start drawing from -Math.PI/2, after reaching the execution corner x, the next area starts drawing from x, and then stops at a corner y. Repeat this until Math.PI * 3 / 2 ends.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制饼状图</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
<script type="text/javascript">
//第一步、获取canvas对象
var canvas = document.querySelector('#canvas');
//第二步、获取上下文
var ctx = canvas.getContext('2d');
//第三步、绘制饼状图
var x = 300;
var y = 300;
var r = 100;
var start = -Math.PI/2;
var step = Math.PI*2/3;
var color = ['red','orange','yellow'];
for(var i = 0;i < 3;i++){
ctx.beginPath();
ctx.moveTo(x,y);
ctx.fillStyle = color[i];
ctx.arc(x,y,r,start,start+=step);
ctx.fill();
}
</script>
</body>
</html>