「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」
1 ，清除画布
clearRect(x, y width, height)
x 矩形左上角的x坐标
y 矩形左上角的y坐标
width 矩形的高度
height 矩形的高度
案例：把一块画布空心矩形中间的颜色清空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清空</title>
<style>
canvas {
margin: 0 auto;
border: 1px solid red;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px">
您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果
</canvas>
</body>
<script>
// 获取canvas标签
var canvas = document.getElementById('canvas')
// 获取canvas上下文对象，可理解为：使用画布的权限
var context = canvas.getContext('2d')
// 固定-end
context.rect(100, 100, 300, 200)
context.fillStyle = "green";
context.fill() // 填充
// 给画布描边， 着色为红色
context.strokeStyle = "red"
context.lineWidth = 5;
context.stroke()
// 清空画布
context.clearRect(120, 120, 180, 100)
</script>
</html>
效果如图：
2 ，画圆
arc() 方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧
arc(x,y,radius,startAngle,endAngle,counterclockwise),一共6个参数
x, y 描述弧的圆形的圆心坐标
radius 描述弧的圆形的半径
startAngle, endAngle
沿着圆指定弧的开始点和结束点的一个角度，这个角度用弧度来衡量。 简称：开始画圆的坐标
沿着x轴正半轴的三点钟方向的角度为0， 角度沿着逆时针方向而增加： 简称：结束画圆的坐标
counterclockwise 弧沿着圆周的逆时针方向还是顺时针方向遍历： 简称画圆的方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画圆</title>
<style>
canvas {
margin: 0 auto;
border: 1px solid red;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px">
您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果
</canvas>
</body>
<script>
// 获取canvas标签
var canvas = document.getElementById('canvas')
// 获取canvas上下文对象，可理解为：使用画布的权限
var context = canvas.getContext('2d')
// 画圆
context.arc(250, 250, 200, 0, Math.PI * 2, false)
// 填充
context.fillStyle = "gold";
context.fill()
// 着色
context.lineWidth = 3;
context.strokeStyle = 'red'
context.stroke()
</script>
</html>
效果图如下：
3 ，画圆弧
注意： 画圆弧和画圆的方法一样，区别是：第五个参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画圆</title>
<style>
canvas {
margin: 0 auto;
border: 1px solid red;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px">
您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果
</canvas>
</body>
<script>
// 获取canvas标签
var canvas = document.getElementById('canvas')
// 获取canvas上下文对象，可理解为：使用画布的权限
var context = canvas.getContext('2d')
// 画圆
context.arc(100, 100, 100, 0, Math.PI, true)
context.arc(300, 100, 100, 0, Math.PI, false)
// 填充
context.fillStyle = "yellow";
context.fill()
// 着色
context.lineWidth = 3;
context.strokeStyle = 'red'
context.stroke()
// 画圆,不带横轴的
context.beginPath()
context.arc(100, 300, 100, 0, Math.PI, true)
context.stroke()
context.beginPath()
context.arc(300, 300, 100, 0, Math.PI, false)
context.stroke()
</script>
</html>
效果如下
注意：也可以实现一个同心圆的效果
// 画一个童心圆
context.beginPath()
context.arc(250, 250, 100, 0, Math.PI * 2, true)
context.stroke()
context.beginPath()
context.arc(250, 250, 80, 0, Math.PI * 2, false)
context.stroke()
context.beginPath()
context.arc(250, 250, 120, 0, Math.PI * 2, false)
context.stroke()
4 ，实战茶杯
思路： 对圆弧进行封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画圆</title>
<style>
canvas {
margin: 0 auto;
border: 1px solid red;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px">
您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果
</canvas>
</body>
<script>
// 获取canvas标签
var canvas = document.getElementById('canvas')
// 获取canvas上下文对象，可理解为：使用画布的权限
var context = canvas.getContext('2d')
// 画杯身，空心矩形
context.lineWidth = 2;
context.strokeStyle = 'red'
context.strokeRect(100, 200, 200, 200)
// 画杯子把手
drawCircle(300, 300, 60, 10, false, 'red')
// 热气
for(var i =0; i < 4; i++) {
drawCircle(135 + i * 40, 120, 20, 1, true, 'grey')
drawCircle(135 + i * 40, 160, 20, 1, false, 'grey')
}
// 画半圆弧
function drawCircle(x, y, r, width, flag, color) {
context.beginPath()
context.arc(x, y,r, -Math.PI/2, Math.PI/2, flag)
context.lineWidth = width
context.strokeStyle = color || '#000'
context.stroke()
}
</script>
</html>
效果如图：
5 ，项目源码
项目代码地址和文档中的截图都是同步的，都已经实现， 在canvas文件夹中
[持续更新中]
