用canvas画一个太极图（八卦图）

首页 > 科技 > 正文

2021-05-11

发表自话题：解读八卦图

用canvas画一个太极图（八卦图）

源码展示链接：
https://yanhappiness.github.io/Notes/canvas_src.html

理解什么是canvas

canvas是HTML5新增的标签，用于图形的绘制。通过脚本 (通常是JavaScript)来完成.

如何使用canvas

也就是说canvas只是定义了一块画布，而真正实现路径,盒、圆、字符以及添加图像的绘制是借助于脚本javascript实现的。
首先，找到元素:

var canvas=document.getElementById("myCanvas");

然后，创建 context 对象：

var ctx=canvas.getContext("2d");

arc() 方法讲解

理解了怎么获取元素以及创建对象之后就可以着手去构思怎么画一个太极图了。
用到的是canvas中的 arc() 方法绘制圆形

arc(x, y, radius, startAngle, endAngle, anticlockwise)

arc的六个参数分别是（x坐标,y坐标,半径,起始位置,结束位置,方向（顺时针false/逆时针true））
里面有两个参数比较难以理解starAngle起始位置和endAngle终止位置，用Math.PI来表示。
PI 属性就是 π，即圆的周长和它的直径之比。这个值近似为 3.14。
下面用一张图来具体说明下：

举个栗子：
如果想画一个圆形那么：

arc(x坐标,y坐标,半径, 0, Math.PI*2);

如果是想画一个半圆（左半圆）那么：

arc(x坐标,y坐标,半径, Math.PI*0.5, Math.PI*1.5);

太极图的构思

仔细观察可以发现太极图就是由圆或者半圆层叠而成的
下面是部分代码
html部分：新建画布800*800（大小自定）

javascript获取元素部分

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");

1.先画一个左半圆（白色）

context.arc(400, 400, 300, Math.PI*0.5, Math.PI*1.5);//圆心在画布正中间，半径为300 context.fillStyle = "#FFF";//设置实心圆的填充色 context.fill();//绘制填充

2.画一个右半圆（黑色）

context.beginPath();//重新绘制，避免继承已设置元素的属性 context.arc(400, 400, 300, Math.PI*1.5, Math.PI*0.5);//圆心在画布正中间，半径为300 context.fillStyle = "#000";//设置实心圆的填充色 context.fill(); //绘制填充

3.画一个上半圆（黑色）

context.beginPath(); context.arc(400, 250, 150, Math.PI*0.5, Math.PI*1.5); context.fillStyle = "#000"; context.fill();

4.画一个上实心圆（白色） 3的同心圆半径小于3

context.beginPath(); context.arc(400, 250, 50, 0, Math.PI*2); context.fillStyle = "#FFF"; context.fill();

5.画一个下半圆（白色）

context.beginPath(); context.arc(400, 550, 150, Math.PI*1.5, Math.PI*0.5); context.fillStyle = "#FFF"; context.fill();

6.画一个下实心圆（黑色） 5的同心圆半径小于5

context.beginPath(); context.arc(400, 550, 50, 0, Math.PI*2); context.fillStyle = "#000"; //填充样式 context.fill(); //绘制填充

7.优化外圆的整体边框（黑色）

context.beginPath(); context.arc(400, 400, 300, 0, Math.PI*2); context.strokeStyle="#000"; //边框样式 context.lineWidth = 2; //设置线条粗细为2px context.stroke(); //边框绘制

收工！！！