Canvas 绘制旋转太极图

最新推荐文章于 2020-11-24 20:14:42 发布
最新推荐文章于 2020-11-24 20:14:42 发布
阅读量750 收藏 1
点赞数 1
分类专栏： Canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42990678/article/details/82262372
版权

 

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>01太极</title>

<style type="text/css">

#mal {

display: block;

margin: 80px auto 0;

border: 1px solid gold;

}

</style>

</head>

<body>

<canvas id="mal" width="600" height="600"></canvas>

</body>

<script type="text/javascript">

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

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

var q = 0;

var pointX =0;

var pointY =0;

setInterval(function  () {

canvas.width = 600;

canvas.height = 600;

context.translate(300,300);

q += Math.PI/180;

context.rotate(q);

context.beginPath();

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

context.closePath();

context.fillStyle = 'black'

context.fill();

context.beginPath();

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

context.closePath();

context.fillStyle = 'red'

context.fill();

context.beginPath();

context.arc(0, -75, 75, 0, Math.PI * 2, false);

context.closePath();

context.fillStyle = 'black'

context.fill();

context.beginPath();

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

context.closePath();

context.fillStyle = 'red'

context.fill();

context.beginPath();

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

context.closePath();

context.fillStyle = 'red'

context.fill();

context.beginPath();

context.arc(0, 75, 35, 0, Math.PI * 2, false);

context.closePath();

context.fillStyle = 'black'

context.fill();

}, 1);

</script>

</html>

世安
关注
专栏目录
canvas实现 旋转太极图(第一发)
Tonglanlinling的博客
03-29 518
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用canvas画太极图</title> <style> * { margin: 0; padding: 0...
canvas实现 旋转太极图(第二发)
Tonglanlinling的博客
03-29 317
效果展示: 代码展示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用canvas画太极图</title> <style> * { margin: 0; ...
Canvas实现太极图案并旋转
qq_15167261的博客
04-16 1181
效果如下：       your browser does not support the canvas tag     var canvas = document.getElementById('myCanvas');  var ctx = canvas.getContext("2d");  var angle = 0;  var count = 360;  var
Canvas制作旋转的太极的示例
09-27
主要介绍了Canvas制作旋转的太极的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Canvas绘制旋转太极
zeyu1021的专栏
12-11 481
之前在一片博文里面看到博主画了一个太极（http://blog.csdn.net/u011043843/article/details/41783571），不过里面的太极旋转是靠每0.5秒重新绘画一次而实现了。正好最近要学html5和css3，我就给它加了一个css3的旋转方法，放在上面。旋转更流畅了 HTML： Canvas绘制旋转太极 JavaScr
Canvas画太极图并旋转
weixin_39616739的博客
06-30 464
<canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanva...
canvas制作旋转的太极图
梁伟业的博客
07-21 707
  博主新手，请多谅解。欢迎指导！ 以下为完整的代码段：  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;/head&gt; &lt;body&gt; &lt;canvas id="canvas" wid
使用HTML5 Canvas绘制一个太极，并令其转动
LiuZijian的博客o(^▽^)o
10-09 3365
使用HTML5 Canvas绘制一个太极，并令其转动。
canvas绘制太极图
01-08
css样式代码 .animation{ width: 800px; height: 800px; border: 1px solid #000; } #canvas{ animation: rotate 6s linear infinite; } /* 给太极图设置旋转动画 */ @keyframes rotate{ 0%{ transform: none; } 100%{ transform: rotate(360deg); } } javascript代码 //文档加载完毕后执行函数 [removed] = function(){
canvas绘制太极图的实现示例
01-21
看到了很多人写的太极图案，自己也来搞一下，今天就来.../* 给太极图设置旋转动画 */ @keyframes rotate{ 0%{ transform: none; } 100%{ transform: rotate(360deg); } } javascript代码 //文档加载完毕后执行
HTML5 Canvas旋转动画的2个代码例子（一个旋转的太极图效果）
09-28
在这个例子中，我们将详细探讨如何利用HTML5 Canvas实现旋转动画，特别是创建一个旋转的太极图效果。 首先，我们要了解Canvas的基本用法。在HTML中，我们创建一个`<canvas>`元素，指定其宽度和高度，然后通过...
HTML5 Canvas 绘制太极图
weixin_34415923的博客
11-15 519
代码： <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>太极图</title>...
JS用Canvas绘制太极图.
11-15
1.本项目是基于Dcloud的有一个移动APP项目 2.html5页面同时支持浏览器中访问 (绘制太极界面可以直接在浏览器中运行)
html 绘制太极
热门推荐
zww学习笔记
10-15 1万+
太极的绘制主要需要用到5个圆，具体代码如下：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .bigCircle{ width: 200px; height: 200px;
MFC GDI 画太极(韩国国旗)
07-28
用MFC画的一个太极图
计算机图形学(MFC)-太极图
03-24
语言：C++ 运行环境：Visual Studio 2013/更高版本
画太极图的C++代码实现
05-09
绘制太极图的原理简单来说就是画两个半圆一黑一白 拼成一个正圆 再在大圆的左侧和右侧画两个恰好相切的黑圆和白圆作为突出端 最后分别在这两个突出端里面画两个一黑一白的小洞 MFC里利用void CDrawView::OnDraw CDC pDC 这个函数进行绘图 和课堂上绘制正弦曲线相比 如果用一笔一笔循环的方式画圆将会很复杂 因此我就参考网上的 用Pie函数和Ellipse函数画弧和圆 画图用了CBrush画刷和CPen画笔 ">绘制太极图的原理简单来说就是画两个半圆一黑一白 拼成一个正圆 再在大圆的左侧和右侧画两个恰好相切的黑圆和白圆作为突出端 最后分别在这两个突出端里面画两个一黑一白的小洞 MFC里利用void CDrawView::OnDraw CDC pDC 这 [更多]
canvas制作动态太极图
H&B Blog
08-06 1439
用 canvas 画布绘制出一个会旋转的太极图 方法一： 运用css动画来实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态版太极图</title> <style> *{ margin: 0; ...
静态的图太无趣？旋转的太极图，参见！
08-04
使用matlab实现图形的旋转--旋转的太极图
使用matlab画可以旋转的太极图
一名在读学生
11-24 2264
对于太极图，我在网上也找了一些方法来画。最后我选择了这个。 主要思路就是，先画两个大的半圆，拼成太极最外圈的圆，然后画两个小圆（小圆的位置可以自己多调几次，自己看的舒服就好），接着再画两个半圆，作为太极图中间的分割线。这样，太极的轮廓就画好了。 接下来就是填充颜色。涂色的画，建议根据面积，从大到小开始，利用图层覆盖来填充颜色。 那么就可以先给其中的一个大半圆填充成黑色（反正底色就是白色，白色就不用填充啦），然后填充“分割线”那里的两个半圆（虽然画的时候展现的是圆弧，其实是个半圆啦）， 接下来，画一条白线，遮
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值