canvas绘图太极图的完成示例

日期:2021-02-22 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

看到了许多人写的太极图案设计,自身也来搞1下,今日就来详细介绍1下

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编码

//文本文档载入结束后实行涵数
window.onload = function(){
  //获得画布目标
  var canvas = document.getElementById('canvas');
  //获得左右文目标
  var context = canvas.getContext('2d');
  //圆刚开始相对路径
  context.beginPath();
  //绘图最外层的大圆(黑色)
  context.arc(400, 400, 300, Math.PI / 180 * 0, Math.PI / 180 * 360);
  //将大圆填充为黑色
  context.fillStyle = '#000';
  context.fill();
  //绘图左半圆(白色)
  context.beginPath();
  context.arc(400, 400, 300, Math.PI / 180 * 90, Math.PI / 180 * 270);
  context.fillStyle = '#fff';
  context.fill(); 
  //绘图右半圆(黑色),会遮盖外层大圆,色调1样。因此写不写都可以以
  /* context.beginPath();
  context.arc(400, 400, 300, Math.PI / 180 * 270, Math.PI / 180 * 90);
  context.fillStyle = '#000';
  context.fill(); */
  //绘图左上半圆(黑色)
  context.beginPath();
  context.arc(400, 250, 150, Math.PI / 180 * 90, Math.PI / 180 * 270);
  context.fillStyle = '#000';
  context.fill(); 
  //绘图右下半圆(白色)
  context.beginPath();
  context.arc(400, 550, 150, Math.PI / 180 * 270, Math.PI / 180 * 90);
  context.fillStyle = '#fff';
  context.fill(); 
  //绘图左上小半圆(白色)
  context.beginPath();
  context.arc(400, 250, 35, Math.PI / 180 * 0, Math.PI / 180 * 360);
  context.fillStyle = '#fff';
  context.fill(); 
  //绘图右下小半圆(黑色)
  context.beginPath();
  context.arc(400, 550, 35, Math.PI / 180 * 0, Math.PI / 180 * 360);
  context.fillStyle = '#000';
  context.fill(); 
}

html编码

<div class="animation">
    <canvas id="canvas" width="800" height="800"></canvas>
  </div>

设定动漫以后的太极图实际效果

到此这篇有关canvas绘图太极图的完成示例的文章内容就详细介绍到这了,更多有关canvas太极图內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!

上一篇:html5 横向拖动导航栏栏的方式示例 返回下一篇:没有了