1,三角形
<!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>Document</title>
</head>
<body>
<canvas id="my" width="300" height="300" style="border: 1px solid teal;"></canvas>
</body>
<script>
// 获取元素
var my = document.getElementById('my')
// 建立画布
var c = my.getContext('2d')
// 开始路径
c.beginPath()
// 定点 先将你的笔移到0,0处
c.moveTo(100, 100)
//先将笔画到200,200处
c.lineTo(200, 200);
// 画线 将笔画到150,220处
c.lineTo(150, 230)
// 画线 将笔画到100,100处形成闭合的三角形
// fill函数会自动闭合图形c.lineTo(100,100); 可以不写
c.lineTo(100, 100)
// 执行绘画.轮廓三角形
// c.stroke()
c.fillStyle = 'red';//改变填充颜色
//填充三角形(实心)
c.fill();
// 关闭路径
c.closePath()
</script>
</html>
2,圆形
<!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>Document</title>
</head>
<body>
<canvas id="my" width="300" height="300" style="border: 1px solid teal;"></canvas>
</body>
<script>
// 获取元素
var my = document.getElementById('my')
// 建立画布
var c = my.getContext('2d')
// 开始路径
c.beginPath()
// 画圆 参数:参数1:原点x,参数2:原点y,参数3:半径,参数4:起始弧度,参数5:结束弧度,参数6:(非必填):false顺时针,true顺时针 | 角度0代表三点钟方向。math.pi可简单认为是180°
c.arc(150,150,100,0,Math.PI*2,false)
//c.stroke轮廓和c.fill填充只能二选一
// 更改轮廓颜色 红色
c.strokeStyle='red'
// 执行绘画 轮廓圆形
c.stroke()
// 更改填充颜色 红色
// c.fillStyle='red'
// 执行绘画 填充圆形 实心
// c.fill()
// 结束路径
c.closePath()
</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>Document</title>
</head>
<body>
<canvas id="my" width="300" height="300" style="border: 1px solid teal;"></canvas>
</body>
<script>
// 获取元素
var my = document.getElementById('my')
// 建立画布
var c = my.getContext('2d')
// 开始路径
c.beginPath()
// 画圆 参数:参数1:原点x,参数2:原点y,参数3:半径,参数4:起始弧度,参数5:结束弧度,参数6:(非必填):false顺时针,true顺时针 | 角度0代表三点钟方向。math.pi可简单认为是180°
c.arc(150,150,100,0,Math.PI,false)
// 如果是填充圆形可不定点和画线,轮廓圆形如果不定点和画线会造成半圆没有封闭
// 定点 移动你的笔
c.moveTo(250,150)
// 画线
c.lineTo(50,150)
//c.stroke轮廓和c.fill填充只能二选一
// 更改轮廓颜色 红色
c.strokeStyle='red'
// 执行绘画 轮廓圆形
c.stroke()
// 更改填充颜色 红色
// c.fillStyle='red'
// 执行绘画 填充圆形 实心
// c.fill()
// 结束路径
c.closePath()
</script>
</html>
4,八卦
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="my" width="500" height="500" style="border: 1px solid teal;"></canvas>
</body>
<script>
var my = document.getElementById('my')
var c = my.getContext("2d");
//1.绘制最外边的大圆
c.beginPath();
c.arc(200, 200, 100, 0, 360 * Math.PI / 180);
c.closePath();
c.stroke();
//2.绘制左边的实心半圆
c.beginPath();
c.arc(200, 200, 100, -90 * Math.PI / 180, 90 * Math.PI / 180, true);
//true是逆时针,false默认值---顺时针
c.closePath();
c.fill();
//3.绘制黑色圆
c.beginPath();
c.arc(200, 250, 50, 0, Math.PI * 2);
c.closePath();
c.fill();
//4.上面的白色圆
c.beginPath();
c.arc(200, 150, 50, 0, Math.PI * 2);
c.closePath();
c.fillStyle = "#fff";
c.fill();
//5.绘制一黑一白圆形
c.beginPath();
c.arc(200, 250, 20, 0, Math.PI * 2);
c.closePath();
c.fill();
//黑色圆
c.fillStyle = "#000";
c.beginPath();
c.arc(200, 150, 20, 0, Math.PI * 2);
c.closePath();
c.fill();
</script>
</html>