利用Canvas制作旋转的太极示例分享

来源：懂视网责编：小采时间：2020-11-27 18:49:13

利用Canvas制作旋转的太极示例分享

利用Canvas制作旋转的太极示例分享:好久没动canvas了，今下午突然想回顾一下，就写了个旋转的太极，哈哈，蛮好玩的，在这里就将自己写的过程展示出来，旋转使用的css实现的，没有用canvas自己的，希望大佬们不要吐槽。本文主要和大家介绍了Canvas制作旋转的太极的示例的相关资料，希望能帮助到

推荐度：

点击下载本文 文档为doc格式

导读利用Canvas制作旋转的太极示例分享:好久没动canvas了，今下午突然想回顾一下，就写了个旋转的太极，哈哈，蛮好玩的，在这里就将自己写的过程展示出来，旋转使用的css实现的，没有用canvas自己的，希望大佬们不要吐槽。本文主要和大家介绍了Canvas制作旋转的太极的示例的相关资料，希望能帮助到

好久没动canvas了，今下午突然想回顾一下，就写了个旋转的太极，哈哈，蛮好玩的，在这里就将自己写的过程展示出来，旋转使用的css实现的，没有用canvas自己的，希望大佬们不要吐槽。本文主要和大家介绍了Canvas制作旋转的太极的示例的相关资料，希望能帮助到大家。

前言

css

body{
 background: #ddd;
}
#canvas{
 position: absolute;
 left: 40%;
 top: 30%;
 -webkit-transform: translate(-50%,-50%);
 -moz-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 -o-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
 -webkit-animation: testAnimate 3s linear infinite;
 -o-animation: testAnimate 3s linear infinite;
 animation: testAnimate 3s linear infinite;
}
@keyframes testAnimate {
 from {
 -webkit-transform: rotate(0);
 -moz-transform: rotate(0);
 -ms-transform: rotate(0);
 -o-transform: rotate(0);
 transform: rotate(0);
 }
 to {
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}

html

<body>
 <canvas id="canvas" width="500" height="500"></canvas>
</body>

let ctx = document
 .getElementById("canvas")
 .getContext("2d");
// left-black-big
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.arc(250,250,200,Math.PI/2,Math.PI*1.5,false);
ctx.closePath();
ctx.fill();
// right-white-big
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(250,250,200,Math.PI/2,Math.PI*1.5,true);
ctx.closePath();
ctx.fill();
// top-black-middle
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.arc(250,150,100,Math.PI/2,Math.PI*1.5,true);
ctx.closePath();
ctx.fill();
// bottom-white-middle
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(250,350,100,Math.PI/2,Math.PI*1.5,false);
ctx.closePath();
ctx.fill();
// top-white-small
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(250,150,25,0,Math.PI*2);
ctx.closePath();
ctx.fill();
// bottom-black-small
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.arc(250,350,25,0,Math.PI*2);
ctx.closePath();
ctx.fill();

效果

利用Canvas制作旋转的太极示例分享

推荐度：

点击下载本文 文档为doc格式

标签：分享示例 canvas

热门焦点

利用Canvas制作旋转的太极示例分享

利用Canvas制作旋转的太极示例分享

利用Canvas制作旋转的太极示例分享

最新推荐

猜你喜欢

热门推荐