扣丁学堂HTML5培训教你用Canvas制作旋转的太极

2018-05-08 15:44:09 802浏览

不知道小伙伴们对用Canvas制作旋转的太极是否感兴趣，扣丁学堂　扣丁学堂HTML5在线学习小编今天和大家分享一下如何利用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制作旋转的太极的示例，希望对小伙伴们有所帮助，喜欢HTML5开发想要学习的小伙伴可以选择专业的HTML5培训机构扣丁学堂进行学习。扣丁学堂不仅有专业的老师和与时俱进的课程体系，还有大量的HTML5视频教程供学员观看学习哦。扣丁学堂H5技术交流群：559883758。

关注微信公众号获取更多学习资料

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>

标签: 扣丁学堂HTML5培训教你用Canvas制作旋转的太极 HTML5培训 HTML5视频教程 HTML5在线课程 HTML5在线学习 HTML5在线视频 HTML5从入门到精通 html5基础教程

上一篇扣丁学堂HTML5在线教程分享配置H5的滚动条样式示例代码下一篇扣丁学堂html5培训详解px单位html5响应式方案

扣丁学堂HTML5培训教你用Canvas制作旋转的太极

热门专区

课程推荐