Canvas绘制八卦图
运用Canvas绘图编写一个八卦图效果。
最终效果如下：
代码实现如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas绘制八卦图</title>
<style type="text/css">
body {
text-align: center;
margin: 50px auto;
}
canvas {
background: #fff;
border: 1px solid #f00;
}
</style>
</head>
<body>
<canvas id="c0" width="500" height="600">
您的浏览器不支持Canvas绘图
</canvas>
<script type="text/javascript">
var ctx = c0.getContext("2d");
//1.绘制最外边的大圆
ctx.beginPath();
ctx.arc(200, 200, 100, 0, 360 * Math.PI / 180);
ctx.closePath();
ctx.stroke();
//2.绘制左边的实心半圆
ctx.beginPath();
ctx.arc(200, 200, 100, -90 * Math.PI / 180, 90 * Math.PI / 180, true);
//true是逆时针，false默认值---顺时针
ctx.closePath();
ctx.fill();
//3.绘制黑色圆
ctx.beginPath();
ctx.arc(200, 250, 50, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
//4.上面的白色圆
ctx.beginPath();
ctx.arc(200, 150, 50, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = "#fff";
ctx.fill();
//5.绘制一黑一白圆形
ctx.beginPath();
ctx.arc(200, 250, 20, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
//黑色圆
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.arc(200, 150, 20, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
// ctx.arc(x,y,r,start,end,direction);
// x,y是圆心的坐标
// r 圆心的半径
// start 和end 开始位置和结束位置
// 注意：是弧度制-->start*Math.PI/180或者end*Math.PI/180
// direction 是绘制方向 boolean值,默认是false 顺时针 true 是逆时针
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/06/29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
