HTML5绘制太极图
HTML5中使用canvas元素+javascript绘制太极图的两种方法
方法一:中间有个半圆填充颜色不太明白,左边下小白半圆的颜色。
<body>
<canvas id="canvas" width="800" height="600">您的浏览器不支持HTML5中的canvas元素,请使用chrome浏览器!</canvas>
<!-- 方法一:教程方法,左边下小白半圆 颜色有点不懂 -->
//经过测试,第二个小半圆变白的原因是,默认填充色为黑色,黑色上面叠加的黑色就变白了,黑+黑=白 同理,白+白=黑
<script type="text/javascript">
var canvas = document.getElementById('canvas'); //固定语句
var context = canvas.getContext('2d'); //固定语句 2d 必须是小写的d.
var linearGradient1=context.createLinearGradient(400,100,400,500); //线性渐变
linearGradient1.addColorStop(0,'black');
linearGradient1.addColorStop(1,'white');
var linearGradient2=context.createLinearGradient(400,100,400,500); //线性渐变
linearGradient2.addColorStop(0,'white');
linearGradient2.addColorStop(1,'black');
var radialGradient3=context.createRadialGradient(400,200,1,400,200,10); //放射性渐变 径向渐变
radialGradient3.addColorStop(0,'black');
radialGradient3.addColorStop(1,'white');
var radialGradient4=context.createRadialGradient(400,400,1,400,400,10); //放射性渐变 径向渐变
radialGradient4.addColorStop(0,'white');
radialGradient4.addColorStop(1,'black')
context.fillStyle ='black'; //这里的颜色值可以写成渐变 linearGradient1
context.arc(400,300,200,Math.PI/2,Math.PI*1.5,false); //左边大黑半圆
context.arc(400,200,100,Math.PI/2,Math.PI*1.5,true); //右边上小黑半圆
context.arc(400,400,100,Math.PI*1.5,Math.PI/2,true); //左边下小白半圆 就这里,颜色怎么变的这点不清楚 黑+黑=白
context.fill();
context.beginPath();
context.fillStyle ='white'; //这里的颜色值可以写成渐变 linearGradient2
context.arc(400,300,200,Math.PI/2,Math.PI*1.5,true); //右边大白半圆
context.arc(400,400,100,Math.PI/2,Math.PI*1.5,false); //左边上小白半圆
context.arc(400,200,100,Math.PI*1.5,Math.PI/2,false); //右边上小黑半圆
context.fill();
context.beginPath();
context.fillStyle='white'; //上面的小圆点 颜色值可以用渐变色 radialGradient3
context.arc(400,200,10,0,Math.PI*2);
context.fill();
context.beginPath();
context.fillStyle='black'; //下面的小圆点 颜色值可以用渐变色 radialGradient4
context.arc(400,400,10,0,Math.PI*2);
context.fill();
//引用自51自学网讲师吉延鹏 https://www.51zxw.net/Show.aspx?cid=540&id=47129
</script>
</body>
方法二:更易懂
<body>
<canvas id="canvas" width="800" height="600">您的浏览器不支持HTML5中的canvas元素,请使用chrome浏览器!</canvas>
<!-- 方法二:网上帖子 跟第一种很像,就是一步一步打散了 更清晰易懂 -->
<script type="text/javascript">
var canvas = document.getElementById('canvas'); //固定语句
var context = canvas.getContext('2d'); //固定语句 2d 必须是小写的d.
// 绘制左边黑色大半圆
context.fillStyle='black';
context.arc(400,300,200,Math.PI/2,Math.PI*1.5,false);
context.fill();
//绘制右边白色大半圆
context.beginPath();
context.fillStyle='white';
context.arc(400,300,200,Math.PI/2,Math.PI*1.5,true);
context.fill();
// 绘制一个白色小半圆盖在黑色大半圆的上面
context.beginPath();
context.fillStyle='white';
context.arc(400,200,100,Math.PI/2,Math.PI*1.5,false);
context.fill();
//绘制一个黑色小半圆盖在白色大半圆的上面
context.beginPath();
context.fillStyle='black';
context.arc(400,400,100,Math.PI/2,Math.PI*1.5, true);
context.fill();
//画出两个黑白点
context.beginPath();
context.fillStyle='black';
context.arc(400,200,20,0,Math.PI*2);
context.fill();
context.beginPath();
context.fillStyle='white';
context.arc(400,400,20,0,Math.PI*2);
context.fill();
// 参考自 https://blog.csdn.net/yf19990720/article/details/107322790
</script>
</body>