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>

Canvas绘制八卦图相关推荐

canvas 绘制八卦图
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
python中turtle画圆填充颜色_用Python中的画图工具turtle绘制八卦图
首先看看八卦图的构造原理,它是由4个半圆和2个小圆组成的,所以只需要画半圆和圆,再进行填充就可以构造成一个简单的八卦图了. 1. 导入画笔工具tultle并创建我的画笔: import turtlem ...
用python画八卦图-用Python中的画图工具turtle绘制八卦图
首先看看八卦图的构造原理,它是由4个半圆和2个小圆组成的,所以只需要画半圆和圆,再进行填充就可以构造成一个简单的八卦图了. 1. 导入画笔工具tultle并创建我的画笔: import turtle ...
用python的turtle画图_用Python中的画图工具turtle绘制八卦图
首先看看八卦图的构造原理,它是由4个半圆和2个小圆组成的,所以只需要画半圆和圆,再进行填充就可以构造成一个简单的八卦图了. 1. 导入画笔工具tultle并创建我的画笔: import turtle ...
java怎么画八卦图_自己画八卦图怎么画？电脑绘制八卦图|八卦图的简单画法
今天又是美妙的周五了,其实小编周一早上起床睁开眼的时候,就很期待的想着,如果今天是周五就好了.结果没想到,时间一下子就过去了,今天真的是周五了.啊哈哈,很绕是吧,还是不说废话了,来看看今天的教程方案吧 ...
利用Canvas绘制雷达图
雷达图(蜘蛛网图)是一种常见的数据分析图表,本文采用canvas来绘制雷达图,并最终封装成一个小组件.首先来看一下最终的效果图: 如何画正多边形以正五边形雷达图为例(其他任意正多边形也一样),如下图 ...
css3绘制八卦图及动画效果
原理很简单,就是外面加个盒子box.作为旋转动画的box,然后里面分别利用两个div使用css3的 border-radius绘制半圆,分别定位在上下中间对齐两个位置,里面在放两个小的原点水平和垂直方 ...
使用Canvas绘制背景图
原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...
「Python海龟画图」利用海龟画笔绘制八卦图
绘制八卦图的边界线功能要求八卦图的最外边界是一个圆形,内部从中心点出发,被正反两个半径为外圆圈半径1/2的半圆弧划分开来. 实例代码 import turtle# 设置八卦图的中心位置turtle ...

Canvas绘制八卦图

Canvas绘制八卦图相关推荐

最新文章

热门文章