像素显字的小实例（使用canvas）

最新推荐文章于 2024-06-27 15:57:20 发布

冰雪为融

最新推荐文章于 2024-06-27 15:57:20 发布

阅读量958

点赞数

分类专栏： canvas BOM操作文章标签： canvas

本文链接：https://blog.youkuaiyun.com/lhjuejiang/article/details/79731886

版权

canvas 同时被 2 个专栏收录

5 篇文章

订阅专栏

BOM操作

2 篇文章

订阅专栏

学习canvas的第二天，依然先不总结，简单的把用到的知识点说一下

1、绘制文本：fillText(),这个方法接收四个参数：要绘制的文本字符串，x坐标，y坐标和可选的最大像素宽度（尚未得到所有浏览器的支持）

2、getImageData()：取得原始图像数据、createImageData()：生成新的像素矩阵、putImageData()设置新的像素矩阵

还有很多细节在这里就先不说了

嗯、直接上例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       body{background:black;}
        #c{background:white; }
        ul{overflow:hidden;}
        li{color:#fff; list-style:none; float:left; margin-left:30px; font-size:24px;}
    </style>

</head>
<body>
<ul>
    <li>冰</li>
    <li>雪</li>
    <li>为</li>
    <li>融</li>
</ul>
<canvas id="c" width="400" height="400"><span>该浏览器不支持canvas</span></canvas>


<script>
    var aLi = document.getElementsByTagName('li');
    var oC = document.getElementById('c');
    var oGc = oC.getContext('2d');
    for(var i=0; i<aLi.length;i++){
        aLi[i].onclick = function(){
            var str = this.innerHTML;
            var h=180;
            oGc.clearRect(0,0,oC.width,oC.height);
            oGc.font = h+'px impact';//设置文本样式、大小
            oGc.textBaseline = 'top';//设置文本基线
            oGc.fillStyle = 'red';
            var w = oGc.measureText(str).width;//计算文本的宽度
            oGc.fillText(str,(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);
            var arr = randomArr(w*h,w*h/6);
            var newImg = oGc.createImageData(w,h);//生成新的像素矩阵
            for(var i=0;i<arr.length;i++){
                newImg.data[4*arr[i]] = oImg.data[4*arr[i]];
                newImg.data[4*arr[i]+1] = oImg.data[4*arr[i]+1];
                newImg.data[4*arr[i]+2] = oImg.data[4*arr[i]+2];
                newImg.data[4*arr[i]+3] = oImg.data[4*arr[i]+3];
            }

            oGc.putImageData(newImg,(oC.width - w)/2,(oC.height - h)/2);//将新的像素矩阵添加到画布上

        }

    }
    function randomArr(iAll,iNow){//得到从0-iAll的随机的iNow个整数
        var arr=[];
        var newArr = [];
        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>
</html>