canvas八卦图1

最新推荐文章于 2021-12-08 16:56:08 发布
最新推荐文章于 2021-12-08 16:56:08 发布
阅读量479 收藏
点赞数
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vivian_shuang/article/details/52148582
版权

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

<title></title>

</head>


<body>

<canvas id="canvas" width="500" height="500"></canvas>

<script type="text/javascript">

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

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

ctx.translate(250, 250);

setInterval(function() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.rotate(Math.PI / -180);

// 大圆

ctx.beginPath(); 

ctx.arc(0, 0, 200, 0, Math.PI * 2, false);

ctx.stroke();

// 大黑半圆

ctx.beginPath();

ctx.fillStyle = "black";

ctx.arc(0, 0, 200, Math.PI / 2, Math.PI * 3 / 2, false);

ctx.fill();

ctx.stroke();

// 中白圆

ctx.beginPath();

ctx.strokeStyle = "white";

ctx.fillStyle = "white";

ctx.arc(0, -100, 100, 0, Math.PI * 2, false);

ctx.fill();

ctx.stroke();

// 中黑圆

ctx.beginPath();

ctx.strokeStyle = "black";

ctx.fillStyle = "black";

ctx.arc(0, 100, 100, 0, Math.PI * 2, false);

ctx.fill();

ctx.stroke();

// 小黑圆

ctx.beginPath();

ctx.fillStyle = "black";

ctx.arc(0, -100, 30, 0, Math.PI * 2, false);

ctx.fill();

ctx.stroke();

// 小白圆

ctx.beginPath();

ctx.fillStyle = "white";

ctx.arc(0, 100, 30, 0, Math.PI * 2, false);

ctx.fill();

ctx.stroke();

}, 20)

</script>

</body>


</html>

Vivian_shuang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
canvas绘制动态心电图
05-08
canvas绘制动态心电图，和监护仪上的一样，可参考使用！
Canvas绘制八卦图
越陌度阡
06-29 1204
运用Canvas绘图编写一个八卦图效果。 最终效果如下： 代码实现如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas绘制八卦图</title> <style type="te......
canvas 绘制八卦图
weixin_30786657的博客
03-09 163
绘制要点:　　 　　1.getContext('2d');　　　　-->绘图环境,2维空间 　　2.fillRect(x,y,w,h);　　　　-->矩形:实心(黑色背景) 　　3.strokeRect(x,y,w,h);　　　　-->矩形:空心(白色背景) 　　4.clearRect(x,y,w,h);　　　　-->矩形:在已存在的矩形中挖空一个矩形 　　5.c...
使用canvas做一个八卦图（动态的）
weixin_43478869的博客
12-04 1057
用canvas做一个太极的效果 先说一下思路 画一个大圆，然后在分割成两个半圆（是太极的那种半圆，不是直接分两个半圆），然后在再两个半圆中画两小圆。大概思路就是这样的。 先给你们放个图看一下（颜色你可以随便调） 下来给你上代码 &lt;script type="text/javascript"&gt; // 获取canvas元素 var canvas = document.q...
Html5 Canvas 系列_绘图三(H5 ，CSS3 动态八卦图)
Cloud 专栏
01-19 3970
使用 html5 css3 实现一个动态八卦图，并能实现转动，太极生二仪；
canvas绘制八卦图
艾夏SEO
12-05 975
// 获取对象 var Canvas = document.querySelector('Canvas'); //获取绘图环境 var ctx = Canvas.getContext('2d'); // 绘制八卦图 // 3.1 大圆 ctx.beginPath(); ctx.arc(250,250,250,0,Math.PI,true);
Canvas绘制心电图
11-06
Canvas绘制心电图
ECG html canvas绘制心电图
08-22
ECG html canvas绘制心电图
Canvas螺旋图形动画特效
07-24
Canvas螺旋图形动画特效是一款基于canvas画布绘制锯齿螺旋的图形，这种形状变化旋转动画特效。
canvas实现图像截取功能
08-31
主要为大家详细介绍了canvas实现图像截取功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
canvas 绘制八卦图
IT666DHW的博客
09-28 1357
canvas绘制八卦图              var canvas=document.getElementById("canvas");      var context=canvas.getContext('2d');            //1.先绘制一个完整的空心圆      context.beginPath();      context.arc
canvas八卦图2
Vivian_shuang的博客
08-08 265
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> canvas id="canvas" width="500" height="500">canvas> script type="text/javascript"> var canvas = document
javascript使用八卦
My english is poor,but I am happy to speak my poor english!
07-04 156
关键时刻，一毛钱也能难死英雄汉！编程中有些细节问题也会让你浪费很多时间。 今天看别人的代码的时候，看到了这样一种写法： [code="js"]var a = function(){......}();[/code] 省略号代表部分代码。 开始时我没看明白这事什么意思，经一个js大虾网友点拨后才明白，这只是一种js对象编程的代码简化。 例如： [code="j...
用canvas画一个太极八卦图
qq_44748497的博客
12-08 501
首先是一个静态的八卦图： 这是状态图 主要代码如下： 左半圆 ctx.beginPath() ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5,true) ctx.fill() //右半圆 ctx.beginPath() ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5) ctx.fillStyle = 'white' ctx.fill() //.
js+html 实现关系拓扑图
热门推荐
wx5701619的博客
08-03 6万+
最近要做一个功能。需要用到关系拓扑图。做了一些调研。发现相关插件很多接下来做个分析 1.yWorks 德国人做的。支持jAjax，html ，php。 官网 https://www.yworks.com/ 需要收费 官网demo效果如下： 2.Qunee  中国人自己开发的，js+html5 有中文文档api 官网 http://www.qunee.com/  需要收费 官网d
canvas画八卦图
WeiflR10的博客
01-09 177
methods:{ getapp(){ var canvas=document.getElementById('wholeCanvas') this.canvas2d=canvas.getContext('2d') canvas.width = 1000; canvas.height = 800; //左...
canvas绘图
最新发布
05-26
Canvas 绘图是一种用于在网页上创建动态、交互式图形的技术。Canvas 绘图基于 HTML5 标准，可以使用 JavaScript 在网页上创建动画、游戏、图表等各种可视化效果。 Canvas 绘图有两个重要的对象：canvas 和 context...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值