太极图canvas动态版

最新推荐文章于 2022-11-27 20:00:00 发布
最新推荐文章于 2022-11-27 20:00:00 发布
阅读量874 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h13803761292/article/details/82193421
版权

 

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>太极图</title>

<style type="text/css">

#oneDiv{

display: block;

margin: 100 auto 0;

border: 1px solid gold;

position: relative;

}

 

 

</style>

</head>

<body>

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

</body>

<script type="text/javascript">

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

var context = canvas.getContext('2d');

var q =0;

var pointX = 0;

var pointY = 0;

 

setInterval(function  () {

canvas.width =500;

canvas.height = 500;

context.translate(250,250);

q += Math.PI/180;

context.rotate(q)

//左半圆

context.beginPath();

context.arc(0, 0, 200,Math.PI*0.5,Math.PI*1.5, false);

context.closePath();

context.fillStyle = 'red';

context.fill();

context.stroke();

 

//右半圆

context.beginPath();

context.arc(0, 0, 200,Math.PI*0.5,Math.PI*1.5,true);

context.closePath();

context.fillStyle = 'black';

context.fill();

context.stroke();

 

//上小圆

context.beginPath();

context.arc(0, -100,100,0, Math.PI*2,true);

context.closePath();

context.fillStyle = 'black';

context.fill();

context.stroke();

 

//下小圆 

context.beginPath();

context.arc(0, 100,100,0, Math.PI*2,true);

context.closePath();

context.fillStyle = 'red';

context.fill();

 

//上小圆

context.beginPath();

context.arc(0, -100,50,0, Math.PI*2,true);

context.closePath();

context.fillStyle = 'red';

context.fill();

context.stroke();

 

//下小圆 

context.beginPath();

context.arc(0, 100,50,0, Math.PI*2,true);

context.closePath();

context.fillStyle = 'black';

context.fill();

context.stroke();

},0.1)

 

 

</script>

</html>

H佛山
关注
3D旋转的太极图
weixin_44808327的博客
12-12 1353
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 260px; height: 260px; margin: 200px auto; position: relative; border:
自定义View-画一个会动的太极图
开发简记
01-12 824
效果 步骤分解 像太极图这种比较规则的图形，一般就是用数学知识进行图形分解，分成一个个基本图形，比如线段，圆，矩形，扇形，多边形等，然后一步步绘制出来即可。 - 分解太极图 @Override protected void onDraw(Canvas canvas) { int width = getWidth(); int h
动图太极
keai90008000的博客
04-15 622
package ss.jind.com.zhouoneweek.view; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; impo
HTML+CSS实现旋转太极图动态效果
qq_45654741的博客
07-18 1748
如果对代码有疑惑，可以看我的个人视频 https://www.bilibili.com/video/BV1vV411r75p/ 效果 静止太极图 动态太极图 动态太极图代码 body { background: silver; height: 2000px; } #canvas { position: absolute; top: 20%;
canvas制作动态太极图
H&B Blog
08-06 1417
用 canvas 画布绘制出一个会旋转的太极图 方法一： 运用css动画来实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态版太极图</title> <style> *{ margin: 0; ...
基于canvas画一个太极图
04-29
基于canvas画一个太极图
canvas绘制太极图的实现示例
01-21
看到了很多人写的太极图案，自己也来搞一下，今天就来.../* 给太极图设置旋转动画 */ @keyframes rotate{ 0%{ transform: none; } 100%{ transform: rotate(360deg); } } javascript代码 //文档加载完毕后执行
canvas绘制太极图
01-08
css样式代码 .../* 给太极图设置旋转动画 */ @keyframes rotate{ 0%{ transform: none; } 100%{ transform: rotate(360deg); } } javascript代码 //文档加载完毕后执行函数 [removed] = function(){
JS用Canvas绘制太极图.
11-15
本项目“JS用Canvas绘制太极图”利用了HTML5的Canvas API，结合DCloud移动开发平台，实现了在移动APP和浏览器环境中展示动态的太极图案。 首先，让我们了解一下Canvas的基本概念。Canvas是一个HTML5元素，它的主要...
canvas画布——太极图
qq_45921597的博客
10-11 329
【代码】canvas画布——太极图。
太极图（c#利用GDI+实现）
01-02
利用GDI+完成太极图，利用基本的画图方法来实现。
通过算法生成一幅太极图
weixin_34414650的博客
10-28 352
      前几天发的文章“100幅由程序生成的图像”中，居然没有太极图，这是多么经典的图像。所以，在这篇文章中专门介绍下生成太极图的算法。之前我曾经发过关于太极的文章数学图形(1.23)太极线，那时希望能以曲线的方式描绘出太极图的形状，可惜不太成功。而使用图像的方式，生成太极图则相对比较容易，先上代码： 1 unsigned int CPixelTaijiYinyang::Calc...
简陋中带点动画的太极图
weixin_46370422的博客
03-13 384
简陋中带点动画的太极图 一、效果 做一个简单的太极图，做个动画旋转；在太极图外做个背景，做一个背景放大缩小的动画效果。-逆战班 一、涉及知识点 1.定位position 相对定位position：relative：元素相对于最初位置定位，不会使元素脱离文档流。 绝对定位position：absolute：元素相对于父元素定位（若父元素无定位元素，相对于根元素html定位），使元素完全脱离文档流。 ...
JS Canvas动画之太极图
撒网要见鱼的专栏
11-15 2639
在逛论坛时,偶然看到一篇博文里提到用js绘制一个动态太极图,觉得挺有意思的,于是就开始动手自己也做了一个.  原文链接: http://www.cnblogs.com/varlxj/p/taiji.html (请尊重原作者) 原文里面只能绘制一个图形,并且旋转的时候旋转的是canvas,于是我就做了点改变,使其同时支持多个图形绘制和旋转,同时用一个工厂类来进行控制,防止内存泄漏。 预览效果:
好玩的前端特效之会动的太极图
小白在路上
05-25 1028
话不多说直接上干货 html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>太极动画</title> <link rel="stylesheet"
【Canvas】js用Canvas绘制阴阳太极图动画效果
TA远方
11-27 953
学习JavaScript是否兴趣缺缺，那就需要来一个兴趣学习，问一下有没有兴趣用Canvas画图呢，可以画很多有趣的事物，自由发挥想象，收获多多哦，这里有一个例子，如何用canvas画阴阳太极图动图效果，接下来开始讲，边学边做。
太极图
逍遥的博客
07-18 248
HTML   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;太极图（动画）&lt;/title&gt;     &lt;link rel="stylesheet" href=
如何实现一个转动的太极图
PinG1270的博客
11-24 875
在实现太极图之前我们要先了解一下关于2D旋转和过渡的知识 什么是过渡 过渡指的是从一种样式逐渐改变为另一种样式的效果。 必须规定两项内容： 1.指定要添加效果的css样式。 2.指定效果的持续时间。 transition：width 2s； transition：css属性 过渡时间 过渡速度 延迟时间；用于对一个属性中设置一个过渡效果。 注意：添加多个过渡效果可以使用逗号隔开。 transition-property：width；规定应用过渡的css属性名称 值：需要过渡的属性名称。 all：所有 non
canvas画太极图
最新发布
06-26
Canvas是HTML5中的一个标签，可以通过JavaScript来绘制图形。太极图是一种中国传统文化符号，具有深刻的哲学内涵。下面是一个简单的太极图绘制过程： 1. 首先需要在HTML中添加一个Canvas标签，并设置其宽度和高度： ``` <canvas id="myCanvas" width="200" height="200"></canvas> ``` 2. 然后，在JavaScript中获取Canvas对象，并设置画笔颜色： ``` var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle = "#000000"; ``` 3. 接着，绘制两个同心圆，代表太极图中的阴阳： ``` ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(100, 100, 20, 0, 2 * Math.PI); ctx.stroke(); ``` 4. 绘制两个半圆，代表阴阳相生： ``` ctx.beginPath(); ctx.arc(100, 75, 25, Math.PI, 2 * Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(100, 125, 25, 0, Math.PI); ctx.stroke(); ``` 5. 最后，在两个半圆的交界处绘制两个小圆： ``` ctx.beginPath(); ctx.arc(100, 75, 5, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(100, 125, 5, 0, 2 * Math.PI); ctx.fill(); ``` 至此，太极图就绘制完成了。你可以根据自己的需要调整颜色、大小、位置等参数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值