溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

canvas之如何實(shí)現(xiàn)萬(wàn)花筒效果

發(fā)布時(shí)間：2021-08-26 15:05:48 來(lái)源：億速云 閱讀：117 作者：小新 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)canvas之如何實(shí)現(xiàn)萬(wàn)花筒效果，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

canvas也有css3里transform的變換功能，transform的底層運(yùn)算的方式是運(yùn)用了線(xiàn)性代數(shù)里矩陣，而矩陣是在我們的生活實(shí)踐中會(huì)經(jīng)常被使用，它可以把復(fù)雜的空間問(wèn)題呈現(xiàn)出來(lái)，它還有很多實(shí)踐的地方，然后不懂它的人會(huì)覺(jué)得很難，如果要鉆研，這方面知識(shí)是不能少的。

canvas里封裝好的變換函數(shù)：scale()、rotate()、translate()、transform()、setTransform()；而它們只要傳數(shù)字進(jìn)去即可，單位不用傳，還有這里角度單位是弧度，這些是與css里的區(qū)別，transform()、setTransform();在與這個(gè)變換都有個(gè)記憶保存疊加的功能，而setTransform()幫

你消除這些功能了，換句話(huà)說(shuō)，setTransform() 允許您縮放、旋轉(zhuǎn)、移動(dòng)并傾斜當(dāng)前的環(huán)境。

至于使用方式到w3c里查手冊(cè)。

接下來(lái)效果圖：

canvas之如何實(shí)現(xiàn)萬(wàn)花筒效果

代碼：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>canvas</title>  
    <style>  
    body{   
        background: #eee;   
    }   
    canvas{   
        background: #fff;   
    }   
    </style>  
</head>  
<body>  
    <canvas width="800" height="800"></canvas>  
    <script>  
    var oCas=document.getElementsByTagName("canvas")[0];   
    var cas=oCas.getContext("2d");   
    var arr=[];   
  
    /*繪制數(shù)據(jù)內(nèi)容*/   
    setInterval(function(){   
        cas.clearRect(0,0,800,800);   
        for(var i=0;i<arr.length;i++){   
            cas.save();   
            cas.beginPath();   
            cas.translate(400,400);   
            cas.rotate(arr[i].num*Math.PI/180);   
            cas.scale(arr[i].num2,arr[i].num2);   
            cas.fillStyle=arr[i].color;   
            cas.rect(arr[i].num1,0,20,20);   
            cas.fill();   
            cas.restore();   
            if(arr[i].num1<=0){   
                arr.splice(i,1);   
            }else{   
                arr[i].num++;   
                arr[i].num2-=0.0015;   
                arr[i].num1-=0.4;   
            }   
        }   
    },60);   
  
    /*存儲(chǔ)數(shù)據(jù)*/   
    setInterval(function(){   
        var obj={   
            "num":0,   
            "num1":300,   
            "num2":1,   
            "color":"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"   
        };   
        arr.push(obj);   
    },1000);   
  
    </script>  
</body>  
</html>

要多個(gè)圖形輸出可以先使用個(gè)數(shù)組把數(shù)據(jù)存起來(lái)，然后循環(huán)畫(huà)出數(shù)據(jù)的內(nèi)容，最后在數(shù)據(jù)循環(huán)完后就清除掉畫(huà)布，加上變換的值得變化，這樣就可以做到動(dòng)畫(huà)的效果。

關(guān)于“canvas之如何實(shí)現(xiàn)萬(wàn)花筒效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手