<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function ()
{
var oc = document.getElementById('c1');
var ogc = oc.getContext('2d');
var ali = document.getElementsByTagName('li');
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.fillStyle = 'red';
ogc.textBaseline = 'top';
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 = randnum(w*h,w*h/10);
var newimg = ogc.createImageData(w,h)
for(var i = 0; i <arr.length; i++)
{
newimg.data[arr[i]*4] = oimg.data[arr[i]*4];
newimg.data[arr[i]*4 + 1] = oimg.data[arr[i]*4 + 1];
newimg.data[arr[i]*4 + 2 ] = oimg.data[arr[i]*4 + 2];
newimg.data[arr[i]*4 + 3] = oimg.data[arr[i]*4 + 3];
}
ogc.putImageData(newimg,(oc.width - w)/2,(oc.height - h)/2);
}
}
function randnum( 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>
<style>
body{
background:pink;
}
#c1{
background:white;
}
</style>
</head>
<body>
<canvas id="c1" width="400" height="400"></canvas>
<ul style="float:left;font-size:30px;">
<li>新</li>
<li>年</li>
<li>快</li>
<li>乐</li>
</ul>
</body>
</html>
