HTML5实现旋转的太极

最新推荐文章于 2023-07-04 21:30:32 发布
最新推荐文章于 2023-07-04 21:30:32 发布
阅读量1.8k 收藏
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013756604/article/details/51489156
版权

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style>

#canvas2{

border: 1px solid black;

}

</style>

</head>

<body>

<canvas id="canvas2" width="600px" height="600px"></canvas>

<script type="text/javascript">

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

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

var r= 200;

var radiu = 30;

var center = 300;

function drawTaiji(){

var d = degree(radiu); 

//开始一条路径

ctx.beginPath();

ctx.arc(center-r/2*Math.cos(d),center-r/2*Math.sin(d),r/2,d,d+Math.PI,0);

ctx.arc(center+r/2*Math.cos(d),center+r/2*Math.sin(d),r/2,d,d+Math.PI,1);

ctx.arc(center,center,r,d+Math.PI,d,0);

ctx.fillStyle = "black";

ctx.fill();

ctx.closePath();

ctx.beginPath();

ctx.arc(center,center,r,d+Math.PI*2,d,1);

ctx.strokeStyle = "black";

ctx.stroke();

ctx.closePath();

ctx.beginPath();

ctx.arc(center-r/2*Math.cos(d),center-r/2*Math.sin(d),r/6,d,d+Math.PI*2,0);

ctx.fillStyle = "white";

ctx.fill();

ctx.closePath();

ctx.beginPath();

ctx.arc(center+r/2*Math.cos(d),center+r/2*Math.sin(d),r/6,d,d+Math.PI*2,0);

ctx.fillStyle = "black";

ctx.fill();

ctx.closePath();

}

function degree(x){

return x/180.0*Math.PI;

}

function degreeAdd(){

radiu++;

  ctx.clearRect(0,0,600,600);

  drawTaiji();

}

setInterval(degreeAdd,0.01);

</script>

</body>

</html>
lq_ios
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5+css3实现响应式旋转太极
01-02
基于html5和css3的动画、阴影和伪类等，实现不断旋转的太极图动画效果，响应式设计区分PC端和移动端的浏览效果，
HTML和CSS------太极图
weixin_52953038的博客
08-12 2887
思路： 1、画出两个长方形 2、把两个长方形，拼成一个正方形 3、把拼成的正方形放到一个与之匹配的正方形中 4、把正方形的边角，锐化成圆 5、把左边‘长方形’背景设为白色，把边‘右长方形’背景设为黑色， 6、取‘长方形’宽为直径画圆，并把圆背景设为白色放到正方形的对称轴上，圆的上边与正方形的上边相切 7、取‘长方形’宽为直径画圆，并把圆背景设为黑色放到正方形的对称轴上，圆的上边与正方形的下边相切 8、取两个小圆，一黑一白，补全太极图......
html5画布基础：旋转的太极图
weixin_45627680的博客
11-21 488
html5画布基础：旋转的太极图 静态 在这里，我把太极图看作由一黑一白的左右两个大半圆，一黑一白的左右两个小半圆，和一黑一白的两个小圆组成，如下图所示： 代码： //使用id来寻找canvas元素，并创建context对象 var context = document.getElementById("canvas").getContext("2d");; //画第一个图案 //大半圆 黑 context.beginPat
用HTML5制作一个太极页面
csurvival的博客
04-11 551
今天用Html制作一个会旋转的太极页面 我是一个萌新，有众多不足的地方请大佬多多指教，不喜勿喷 制作后的效果（有改动，手机也可以打开） https://survivor15.github.io/bagua01/ 话不多说直接上代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=
【HTML5】在canvas上绘制简单的2D图形 （+太极图）
jingjing的博客
08-19 1510
canvas（画布） canvas 元素是H5中新增的一个重要元素，专门用来绘制图形。在页面中放置一个canvas元素，就相当于在页面上放置一块画布，可以利用 canvas api 在其中进行图形的描绘。 <canvas id="app" height="300" width="400" style="background-color: #f5f5f5;"> </canvas> <script> //获取canvas元素 var app = document.qu
HTML小案例之太极两仪图画法
qq_57443373的博客
08-12 1588
学习了CSS的浮动布局和定位布局，下面使用这两种布局来画一个太极图。 思路：         1.我们首先要做的就是画出最外层的圆形 我们画一个半径为250像素的圆，给它设置1像素的黑色边框,利用border-radius属性把它从正方形变成一个圆形。 margin:100px auto 把它移到屏幕相对中间的位置 <!DOCTYPE html> <html lang="en"> <head&
html+css3实现可以旋转的太极图案效果特效代码
03-20
效果描述： css3大行其道的今天，可以实现很多原本需要图片才能实现的效果 比如今天给大家推荐的这个可以自动旋转的太极图案效果 在CSS2的时代，你能想象的到，只用HTML+CSS就可以实现这种效果么？ 使用方法： 1、将...
html+css3实现可以旋转的太极图案效果
06-12
比如今天给大家推荐的这个可以自动旋转的太极图案效果 在CSS2的时代，你能想象的到，只用HTML+CSS就可以实现这种效果么？ 使用方法： 1、将index.html中的样式复制到你的样式表中 2、将body中的代码部分...
HTML5 Canvas旋转动画的2个代码例子（一个旋转的太极图效果）
09-28
主要介绍了HTML5 Canvas旋转动画的2个代码例子,实现了一个旋转的太极图效果,学习HTML5 Canvas旋转动画的朋友可以参考下
用HTML+CSS实现 旋转太极图(有阴影效果，自动旋转，转速可调)
08-08
用HTML+CSS实现 旋转太极图(有阴影效果，自动旋转，转速可调)
一个简单的HTML写的太极图
04-17
简单的太极界面
简单的css3，h5正方体旋转
05-27
简单的css3实现3d正方体旋转
用html+css做旋转太极
最新发布
m0_71869542的博客
07-04 181
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
动态八卦图html,HTML绘制太极八卦图
weixin_30227565的博客
06-08 1156
实现效果如下：实现代码如下：太极八卦图div{text-align: center;margin-top: 30px;}#mytj{background-color: skyblue;}var mytj = document.getElementById('mytj');var mt = mytj.getContext('2d');//左边黑色大半圆mt.beginPath();mt.arc(30...
html太极旋转css,纯CSS3技术——制作一个旋转的太极
weixin_36418590的博客
06-20 363
制作一个太极效果就是下面这个样子的：怎么样很帅吧~嘿嘿~首先还是分析一下如何实现这个图形，先来规划好位置~我们先来做一半，剩下的一半直接复制代码，修改一下参数就好了~第一步：首先由三个矩形，做好大致的骨架~第二步：修改样式(形状、背景色等等)。(领会精神就好，这毕竟是个草图)第三步：完成另一半的制作并且添加动画效果。这样我们的太极动画效果就完成了是不是超级简单~好的~现在我们开始动手操作吧~先来规...
使用HTML5 Canvas绘制一个太极，并令其转动
LiuZijian的博客o(^▽^)o
10-09 3312
使用HTML5 Canvas绘制一个太极，并令其转动。
HTML 5：绘制旋转的太极图
淡忘~浅思
12-07 3565
HTML： <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>Canvas绘制旋转太极</title> </head> <body> <canvas id="face" width="200" height="200"></canvas> </body> </html> JavaScript: var canvas = document.getElementById("face"); var cxt = ca
input type="file" 在js中判断文件上传类型
热门推荐
我的专栏
01-04 1万+
input type="file" 在js中判断文件上传类型 function onSubmit(){ var form1 = document.forms[0]; var file = document.forms[0].getfile.value; if (file == null||fi
用HTML+css实现太极八卦图
06-07
好的，以下是一个用HTML和CSS实现太极八卦图的代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>太极八卦图</title> <style> #taiji { width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(90deg, #000000, #ffffff, #000000); position: relative; transform: rotate(45deg); } #taiji:before { content: ''; display: block; width: 100px; height: 100px; border-radius: 50%; background-color: #ffffff; position: absolute; top: 0; left: 50%; margin-left: -50px; } #taiji:after { content: ''; display: block; width: 100px; height: 100px; border-radius: 50%; background-color: #000000; position: absolute; bottom: 0; left: 50%; margin-left: -50px; } #taiji .yin { width: 50px; height: 50px; border-radius: 50%; background-color: #ffffff; position: absolute; top: 25px; left: 50%; margin-left: -25px; } #taiji .yang { width: 50px; height: 50px; border-radius: 50%; background-color: #000000; position: absolute; bottom: 25px; left: 50%; margin-left: -25px; } #taiji .left { width: 50px; height: 50px; border-radius: 50% 0 0 50%; background-color: #000000; position: absolute; top: 75px; left: 0; } #taiji .right { width: 50px; height: 50px; border-radius: 0 50% 50% 0; background-color: #ffffff; position: absolute; top: 75px; right: 0; } #taiji .left:before { content: ''; display: block; width: 25px; height: 50px; background-color: #ffffff; position: absolute; top: 0; left: 0; } #taiji .right:before { content: ''; display: block; width: 25px; height: 50px; background-color: #000000; position: absolute; top: 0; right: 0; } #taiji .left:after { content: ''; display: block; width: 50px; height: 50px; background-color: #000000; position: absolute; top: 0; left: 25px; border-radius: 50%; transform: rotate(45deg); } #taiji .right:after { content: ''; display: block; width: 50px; height: 50px; background-color: #ffffff; position: absolute; top: 0; right: 25px; border-radius: 50%; transform: rotate(45deg); } </style> </head> <body> <div id="taiji"> <div class="yin"></div> <div class="yang"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html> ``` 这段代码会生成一个200*200大小的太极八卦图，使用了CSS3的渐变、旋转、倾斜等属性来实现。同时，八卦图内部的阴、阳两极和四个小半圆也使用了CSS来绘制。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值