因為博客園抽搐導致懶得寫詳細的過程的一篇博客

大概成果就是半成品的抽獎轉盤，主要說一下屬性相關

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div{
           position: relative;
           width: 1000px;
           height: 1000px;
       }
       div canvas{
           width: 500px;
           height: 500px;
       }
       #myCanvas{
<!--動畫過渡，第一個參數是要改變的屬性，第二個參數是從現有屬性到新的屬性需要多長事件實現-->
           transition: transform 6s;
           -o-transition: transform 6s;
           -moz-transition: transform 6s;
           -webkit-transition: transform 6s;
<!--若要旋轉圖形，是以什么為中心旋轉，下面是以畫布的中心為點旋轉，注意不是所畫圖形的中心，而是畫布-->
           -o-transform-origin:  center center;
           -ms-transform-origin:  center center;
           -moz-transform-origin:  center center;
           -webkit-transform-origin:  center center;
           transform-origin:center center;
<!--動畫的實現，第一個參數是綁定動畫的名字，第二個參數是運行動畫的時間-->
           animation: myfirst 5s;
           -webkit-animation: myfirst 5s;
           position: absolute;
           z-index: 20;
       }
<!--動畫具體操作的方法，form{}to{}就是從哪個屬性變到什么-->
       @keyframes myfirst {
           form{background-color: red;}
           to{background-color: yellow;}
       }
       @-webkit-keyframes myfirst {
           form{background-color: red;}
           to{background-color: yellow;}
       }
       #myCanvas01{
           position: absolute;
           z-index: 30;
       }
       #myCanvas02{
           position: absolute;
           z-index: 40;
       }
       #myCanvas03{
           position: absolute;
       }
       .myButton_class{
           left:200px;
           top:200px;
           width: 100px;
           height: 100px;
           position: absolute;
           border: none;
           background-color: transparent;
           z-index: 50;
       }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div>
<!--創建一個畫圖，具體畫什么圖形，要在js里實現-->
    <canvas id="myCanvas" width="500px" height="500px"></canvas>
    <canvas id="myCanvas01" width="500px" height="500px"></canvas>
    <canvas id="myCanvas02" width="500px" height="500px"></canvas>
    <canvas id="myCanvas03" width="500px" height="500px"></canvas>
    <button id="myButton" class="myButton_class">開始抽獎</button>
</div>
<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var canvas01=document.getElementById('myCanvas01');
    var canvas02=document.getElementById('myCanvas02');
    var canvas03=document.getElementById('myCanvas03');
    var ctx=canvas.getContext('2d');
    var ctx01=canvas01.getContext('2d');
    var ctx02=canvas02.getContext('2d');
    var ctx03=canvas03.getContext('2d');
    var yuanx=250,yuany=250;
    var x=200;
    var y=200,r=100;
    var n=8;
    var angle=(Math.PI*2)/n;
    var x1,x2,y1,y2;
    x1=x2=200;
    y1=y2=200;
    //旋轉次數
    var rotNum=0;
    for(var i=1;i<=n;i++){
//保存畫布，將現有的畫圖推到圖形棧中
        ctx.save();
//開始一個新的畫筆，不帶有之前的任何參數
        ctx.beginPath();
//圓的畫法，參數一次是圓心x，圓心y，半徑，開始角度，結束角度
        ctx.arc(yuanx,yuany,75,angle*i,angle*i+angle);
//畫筆的線條寬度，若要畫實心圓，一般為半徑的兩倍
        ctx.lineWidth=150;
        if(i%2==0){
            ctx.strokeStyle="#626262";
        }else{
            ctx.strokeStyle="#787878";
        }
//將畫好的圖形真正的畫到網頁上
        ctx.stroke();
//取出圖形棧中的圖形
        ctx.restore();
    }
//應該是結束畫筆的意思
    ctx.closePath();
    ctx01.beginPath();
    ctx01.arc(yuanx,yuany,25,0,2*Math.PI);
    ctx01.lineWidth=50;
    ctx01.strokeStyle="rgba(0,0,0,0.5)";
    ctx01.stroke();
    ctx01.closePath();
    ctx02.beginPath();
    ctx02.arc(yuanx,yuany,15,0,2*Math.PI);
    ctx02.lineWidth=30;
    ctx02.strokeStyle="rgb(219,20,20)";
    ctx02.stroke();
    ctx02.save();
    ctx02.beginPath()
    ctx02.arc(yuanx,yuany-50,20,Math.PI*2/5,Math.PI*3/5);
    ctx02.lineWidth=40;
    ctx02.strokeStyle="rgb(219,20,20)";
    ctx02.stroke();
    ctx02.restore();
    //ctx02.save();

   // ctx02.strokeStyle="rgb(219,20,20)";
    ctx02.restore();
    ctx02.closePath();
//按鈕的單擊時間，若點擊按鈕，則開始執行function（）里的函數
    $('#myButton').bind('click',function (){
        var num=parseInt(Math.random()*n-0+0);
        alert("被點擊"+num);
        angles=360;
        var degValue='rotate('+angles+'deg)';
//改變css屬性，第一參數是屬性的名稱，第二個參數是屬性的值
        $('#myCanvas').css('-o-transform',degValue);
        $('#myCanvas').css('-ms-transform',degValue);
        $('#myCanvas').css('-wekit-transform',degValue);
        $('#myCanvas').css('-moz-transform',degValue);
        $('#myCanvas').css('transform',degValue);
//改變css屬性，第一參數是屬性的名稱，第二個參數是屬性的值；
//attr與css的區別：css一般是指style的屬性，attr可以改變標簽等更多的屬性；
//attr可以改變img標簽的src的值，a標簽的href的值，一般來說，attr包含css
//prop方法也可以設置標簽屬性的值，但該方法可以返回屬性的值，attr不能
        $('#myButton').attr('disabled',true);
        setTimeout(function (){
//移除更改的屬性
            $('#myButton').removeAttr('disabled',true);
        },6000);
    });
</script>

</body>
</html>

其他相關：

關于CSS動畫：

@keyframes 用來定義動畫序列，animation 屬性用來為標簽盒子引用動畫序列，同一個動畫序列可以被多個標簽盒子引用。

1、anmation-name：名字

2、animation-duration ：時長

3、animation-delay：延時

4、animation-fill-mode：結束狀態

forwards 動畫結束時，保持最后一幀的樣式
backwards 動畫結整時，恢復標簽盒子原本的樣式，該值為默認值

5、animation-timimg-function：速度曲線

linear：勻速
ease：逐漸慢下來
ease-in：加速
ease-out：減速
ease-in-out：先加速后減速

6、animation-iteration-count:重復執行

infinite ：動畫無限循環執行
默認為 1 次認為 1

7、animation-direction:單獨指定是否逆向執行

8、animation-play-state:動畫是否暫停

paused ：動畫暫停
running:動畫繼續

animation:名字+時長+延時+結束狀態+速度曲線+重復執行

posted @ 2021-01-28 14:16 山水有相逢閱讀(43) 評論(0) 收藏舉報

刷新頁面返回頂部

如戲落幕皆清醒

不可結緣，徒增傷悲

因為博客園抽搐導致懶得寫詳細的過程的一篇博客

公告