使用h5新增的canvas标签绘制太极图案-代码
程序员文章站
2022-05-30 09:26:32
...
定义和用法
arc() 方法创建弧/曲线（用于创建圆或部分圆）。
提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
提示：请使用 stroke或 fill方法在画布上绘制实际的弧。
JavaScript 语法
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
| 参数 | 描述 |
|---|---|
| x | 圆的中心的 x 坐标。 |
| y | 圆的中心的 y 坐标。 |
| r | 圆的半径。 |
| sAngle | 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。 |
| eAngle | 结束角，以弧度计。 |
| counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。 |
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas绘制太极图</title>
<style>
* {
padding: 0;
margin: 0;
}
#canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 创建一个画布 -->
<canvas id="canvas" width="400" height="400">您的浏览器不支持canvas，请升级</canvas>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
// 1 绘制一个大圆
ctx.beginPath();//开启路径
ctx.arc(200,200,200,0,2*Math.PI,false);//绘制一个圆 逆时针
ctx.closePath();//闭合路径
ctx.stroke();//描边
// 2 画左边半圆 （从0.5*Math.PI-1.5*Math.PI），颜色填充为黑色
ctx.beginPath();
ctx.arc(200,200,200,0.5*Math.PI,1.5*Math.PI,false);
ctx.closePath();
ctx.fillStyle = '#000';//填充颜色
ctx.fill();//填充
// 3 画左半边上面的半圆（从0-1.5*Math.PI）,颜色填充为白色
ctx.beginPath();
ctx.arc(200,100,100,0,1.5*Math.PI,false);
ctx.closePath();
ctx.fillStyle = '#fff';
ctx.fill();
// 3.1 在上面的半圆内画一个比半圆小的整圆，颜色填充为黑色
ctx.beginPath();
ctx.arc(200,100,40,0,2*Math.PI);
ctx.closePath();
ctx.fillStyle = '#000';//填充黑色
ctx.fill();
// 4 画右半边下面的半圆（从1.5-1*Math.PI）,颜色填充为黑色
ctx.beginPath()
ctx.arc(200,300,100,0.5*Math.PI,1.5*Math.PI,true);//顺时针方向
// ctx.arc(200,300,100,1.5*Math.PI,0.5*Math.PI,false);//逆时针方向
ctx.closePath();
ctx.fillStyle = '#000';//填充黑色
ctx.fill();
// 4.1 在下面的半圆内画一个比半圆小的整圆，颜色填充为白色
ctx.beginPath();
ctx.arc(200,300,40,0,2*Math.PI);
ctx.closePath();
ctx.fillStyle = '#fff';//填充白色
ctx.fill();
</script>
</body>
</html>
上一篇： flutter 的初体验