0
点赞
收藏
分享

微信扫一扫

Canvas绘制八卦图


运用Canvas绘图编写一个八卦图效果。

最终效果如下:

Canvas绘制八卦图_HTML

代码实现如下:

<!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>

举报

相关推荐

0 条评论