国产精品亚洲а∨天堂2020,精品一区二区成人精品,综合色天天鬼久久鬼色

扣丁學(xué)堂HTML5培訓(xùn)教你用Canvas制作旋轉(zhuǎn)的太極

2018-05-08 15:44:09 1620瀏覽

不知道小伙伴們對用Canvas制作旋轉(zhuǎn)的太極是否感興趣，扣丁學(xué)堂　扣丁學(xué)堂HTML5在線學(xué)習(xí)小編今天和大家分享一下如何利用Canvas制作旋轉(zhuǎn)的太極，下面我們一塊來看一下吧。

扣丁學(xué)堂HTML5培訓(xùn)教你用Canvas制作旋轉(zhuǎn)的太極

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制作旋轉(zhuǎn)的太極的示例，希望對小伙伴們有所幫助，喜歡HTML5開發(fā)想要學(xué)習(xí)的小伙伴可以選擇專業(yè)的HTML5培訓(xùn)機(jī)構(gòu)扣丁學(xué)堂進(jìn)行學(xué)習(xí)?？鄱W(xué)堂不僅有專業(yè)的老師和與時(shí)俱進(jìn)的課程體系，還有大量的HTML5視頻教程供學(xué)員觀看學(xué)習(xí)哦?？鄱W(xué)堂H5技術(shù)交流群：559883758。

關(guān)注微信公眾號獲取更多學(xué)習(xí)資料

【關(guān)注微信公眾號獲取更多學(xué)習(xí)資料】

標(biāo)簽: 扣丁學(xué)堂HTML5培訓(xùn)教你用Canvas制作旋轉(zhuǎn)的太極 HTML5培訓(xùn) HTML5視頻教程 HTML5在線課程 HTML5在線學(xué)習(xí) HTML5在線視頻 HTML5從入門到精通 html5基礎(chǔ)教程

上一篇扣丁學(xué)堂HTML5在線教程分享配置H5的滾動條樣式示例代碼下一篇扣丁學(xué)堂html5培訓(xùn)詳解px單位html5響應(yīng)式方案

欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

扣丁學(xué)堂HTML5培訓(xùn)教你用Canvas制作旋轉(zhuǎn)的太極

熱門專區(qū)

課程推薦