Canvas制作旋转的太极的示例

北京园林的色彩大多为金黄或大红,色彩明丽。有时,在万绿丛中见一道飞檐,黄绿相间,相映成趣。大多数宫殿者哺着琉璃瓦,大红色的棱、柱过于庄重,而幽雅倒显得欠缺。也有例外的,潭拓寺的大殿都是由灰色方砖铺地,墙壁也都是灰暗的,同周围的景色浑然一体。 "苔痕上阶绿,草色入帘青 ",古朴淡雅,别具风采。

前言

好久没动canvas了,今下午突然想回顾一下,就写了个旋转的太极,哈哈,蛮好玩的,在这里就将自己写的过程展示出来,旋转使用的css实现的,没有用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>

js

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制作旋转的太极的示例。死亡并不可怕,可怕的是,你辜负了所有人的眼泪,辜负了自己直到生命结束也未曾达到的高度,还有那未曾完成的梦想。更多关于Canvas制作旋转的太极的示例请关注haodaima.com其它相关文章!

标签: Canvas