Canvas字体动画特效

Html

Css

* {
	margin:0px;
	padding:0px;
}
body {
	background-color:lightblue;
	color:gray;
	font-size:50px;
	margin:30px 30px;
}
#myCanvas {
	background-color:white;
	border:solid 5px LightSalmon;
}
ul {
	float:left;
	list-style:none;
	margin:0px 30px 0px 0px;
	cursor:pointer;
	line-height:120px;
}

window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var cxt = canvas.getContext("2d");

var lival = document.getElementsByTagName('li');
    for (var i = 0; i < lival.length; i++) {
        lival[i].onclick = function() {
            var thisval = this.innerHTML;
            var h = 180;

var timer = null;

clearInterval(timer);

var iNow = 0;

cxt.clearRect(0, 0, canvas.width, canvas.height);

cxt.font = h + 'px impact';

cxt.fillStyle = 'red';

cxt.textBaseline = 'top';

var w = cxt.measureText(thisval).width;

cxt.fillText(thisval, (canvas.width - w) / 2, (canvas.height - h) / 2);

var imgval = cxt.getImageData((canvas.width - w) / 2, (canvas.height - 110) / 2, w, h);

cxt.clearRect(0, 0, canvas.width, canvas.height);

var arr = randomArr(w * h, w * h / 10);

var newimg = cxt.createImageData(w, h);

timer = setInterval(function() {

for (var i = 0; i < arr[iNow].length; i++) {
                    newimg.data[4 * arr[iNow][i]] = imgval.data[4 * arr[iNow][i]];
                    newimg.data[4 * arr[iNow][i] + 1] = imgval.data[4 * arr[iNow][i] + 1];
                    newimg.data[4 * arr[iNow][i] + 2] = imgval.data[4 * arr[iNow][i] + 2];
                    newimg.data[4 * arr[iNow][i] + 3] = imgval.data[4 * arr[iNow][i] + 3];
                }
                cxt.putImageData(newimg, (canvas.width - w) / 2, (canvas.height - h) / 2);

if (iNow == 9) {
                    iNow = 0;
                    clearInterval(timer);
                } else {
                    iNow++;
                }

}, 200);

}
    };

function randomArr(iAll, iNow) {
        var arr = []

var allarr = [];
        for (var i = 0; i < iAll; i++) {
            arr.push(i);
        }

for (var j = 0; j < iAll / iNow; j++) {

var newarr = [];

for (var i = 0; i < iNow; i++) {
                newarr.push(arr.splice(Math.floor(Math.random() * arr.length), 1));
            }

allarr.push(newarr);
        }

return allarr;
    }

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

Canvas字体动画特效



代码描述：Canvas点击字体炫酷动画特效

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

让我感激你、曾予我欢颜

相关代码

Canvas字体动画特效

最新