html5 逐漸顯示完全的文字(利用像素操作)


<body>
   <canvas id="c1" width="400" height="400">
   </canvas>
   <ul style="float:left;">
    <li>妙</li>
    <li>味</li>
    <li>課</li>
    <li>堂</li>
   </ul>
    <script type="text/javascript">
        window.onload = function () {
            var oC = document.getElementById("c1");
            var oGC = oC.getContext("2d");
            var lis = document.getElementsByTagName("li");
            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    var timer = null;
                    var inow = 10;
                    clearInterval(timer);
                    oGC.clearRect(0, 0, oC.width, oC.height);
                    //在畫布上寫出文字
                    var txt = this.innerHTML;
                    var h = 180;
                    oGC.font = h + "px impact";
                    oGC.fillStyle = "red";
                    oGC.textBaseline = "top";
                    var w = oGC.measureText(txt).width;
                    oGC.fillText(txt, (oC.width - w) / 2, (oC.height - h) / 2);
                    //得到已寫出的文字像素
                    var oImg = oGC.getImageData((oC.width - w) / 2, (oC.height - h) / 2, w, h);
                    oGC.clearRect(0, 0, oC.width, oC.height);
                    //從像素集合中隨機取出十分之一的像素(對應的索引位置)
                    timer = setInterval(function () {
                        var arr = randomArr(w * h, w * h / inow);
                        inow--;
                        var nImg = oGC.createImageData(w, h);
                        for (var i = 0; i < arr.length; i++) {
                            nImg.data[4 * arr[i]] = oImg.data[4 * arr[i]];
                            nImg.data[4 * arr[i] + 1] = oImg.data[4 * arr[i] + 1];
                            nImg.data[4 * arr[i] + 2] = oImg.data[4 * arr[i] + 2];
                            nImg.data[4 * arr[i] + 3] = oImg.data[4 * arr[i] + 3];
                        }
                        oGC.putImageData(nImg, (oC.width - w) / 2, (oC.height - h) / 2);
                        if (inow == 0) {
                            inow = 10;
                            clearInterval(timer);
                        }
                    });
                }
            }
        }
        //從一個大數中取出十分之一的數
        function randomArr(iAll, iNow) {
            var arr = new Array();
            var newarr = new Array();
            for (var i = 0; i < iAll; i++) {
                arr.push(i);
            }
            for (var i = 0; i < iNow; i++) {
                newarr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
            }
            return newarr;
        }
    </script>
</body>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM