文库网
关注排行榜

当前无数据...

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

css样式代码

  1. <code class="prism language-css">.animation{
  2. width: 800px;
  3. height: 800px;
  4. border: 1px solid #000;
  5. }
  6. #canvas{
  7. animation: rotate 6s linear infinite;
  8. }
  9. /* 给太极图设置旋转动画 */
  10. @keyframes rotate{
  11. 0%{
  12. transform: none;
  13. }
  14. 100%{
  15. transform: rotate(360deg);
  16. }
  17. }
  18. </code>
复制代码

javascript代码

  1. <code class="prism language-javascript">//文档加载完毕后执行函数
  2. window.onload = function(){
  3. //获取画布对象
  4. var canvas = document.getElementById('canvas');
  5. //获取上下文对象
  6. var context = canvas.getContext('2d');
  7. //圆开始路径
  8. context.beginPath();
  9. //绘制最外层的大圆(黑色)
  10. context.arc(400, 400, 300, Math.PI / 180 * 0, Math.PI / 180 * 360);
  11. //将大圆填充为黑色
  12. context.fillStyle = '#000';
  13. context.fill();
  14. //绘制左半圆(白色)
  15. context.beginPath();
  16. context.arc(400, 400, 300, Math.PI / 180 * 90, Math.PI / 180 * 270);
  17. context.fillStyle = '#fff';
  18. context.fill();
  19. //绘制右半圆(黑色),会覆盖外层大圆,颜色一样。所以写不写都可以
  20. /* context.beginPath();
  21. context.arc(400, 400, 300, Math.PI / 180 * 270, Math.PI / 180 * 90);
  22. context.fillStyle = '#000';
  23. context.fill(); */
  24. //绘制左上半圆(黑色)
  25. context.beginPath();
  26. context.arc(400, 250, 150, Math.PI / 180 * 90, Math.PI / 180 * 270);
  27. context.fillStyle = '#000';
  28. context.fill();
  29. //绘制右下半圆(白色)
  30. context.beginPath();
  31. context.arc(400, 550, 150, Math.PI / 180 * 270, Math.PI / 180 * 90);
  32. context.fillStyle = '#fff';
  33. context.fill();
  34. //绘制左上小半圆(白色)
  35. context.beginPath();
  36. context.arc(400, 250, 35, Math.PI / 180 * 0, Math.PI / 180 * 360);
  37. context.fillStyle = '#fff';
  38. context.fill();
  39. //绘制右下小半圆(黑色)
  40. context.beginPath();
  41. context.arc(400, 550, 35, Math.PI / 180 * 0, Math.PI / 180 * 360);
  42. context.fillStyle = '#000';
  43. context.fill();
  44. }
  45. </code>
复制代码

html代码

  1. <code><div class="animation">
  2. <canvas id="canvas" width="800" height="800"></canvas>
  3. </div>
  4. </code>
复制代码

设置动画之后的太极图效果

{tilte}-LYC


本站资源均由网上搜集或网友上传提供,内容仅供观摩学习交流之用,本站将不对任何资源负法律责任.如有侵犯您的版权,请及时联系我们(邮箱:892481490@qq.com,客服QQ:892481490),我们会尽快处理!QQ350550790是骗子,注意不要和他交易!!!
发帖求助前要善用【论坛搜索】功能, 那里可能会有你要找的答案,也能为你节约不少学习时间;
如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加(威望)和(贡献)而不会扣除自己的积分。
如发现灌水帖、病毒木马帖、广告帖、工具不能正常使用、网盘链接失效,请点击【举报】 核实有几率会给予额外的B币奖励哦!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    • 联系我们
    • 关注我们
    • 社区新手

    客服QQ892481490

    客服服务热线时间:9:00 - 21:00

    发布资源 快速回复 返回列表 客服中心 官方QQ群

    QQ|小黑屋|手机版|编程之家论坛 ( 桂ICP备18002029号 )

    Powered by 编程之家  © 20019-2021