<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width='800' height="500"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#272822';
ctx.fillRect(0,0,800,500);
ctx.font='50px 微软雅黑';
ctx.fillStyle='greenyellow';
ctx.fillText('文字信息',200,200);
// 获取图像的所有的像素信息
var alldata=ctx.getImageData(0,0,800,500);
// 获得像素点的个数
var dian=alldata.data.length/4;
// 循环，获得数组的每个值随机
for(var i=0;i<10000;i++){
ctx.clearRect(0,0,800,500);
// 取随机数
var num=Math.floor(Math.random()*dian);
// 计算像素点对应的四条信息从几号开始
var start=(num-1)*4;
alldata.data[start]=Math.floor(Math.random()*256);
alldata.data[start+1]=Math.floor(Math.random()*256);
alldata.data[start+2]=Math.floor(Math.random()*256);
// 将数据写回画板
ctx.putImageData(alldata,0,0);
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width='800' height="500"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#272822';
ctx.fillRect(0,0,800,500);
ctx.font='50px 微软雅黑';
ctx.fillStyle='greenyellow';
ctx.fillText('文字信息',200,200);
// 获取图像的所有的像素信息
var alldata=ctx.getImageData(0,0,800,500);
// 获得像素点的个数
var dian=alldata.data.length/4;
// 循环，获得数组的每个值随机
for(var i=0;i<10000;i++){
ctx.clearRect(0,0,800,500);
// 取随机数
var num=Math.floor(Math.random()*dian);
// 计算像素点对应的四条信息从几号开始
var start=(num-1)*4;
alldata.data[start]=Math.floor(Math.random()*256);
alldata.data[start+1]=Math.floor(Math.random()*256);
alldata.data[start+2]=Math.floor(Math.random()*256);
// 将数据写回画板
ctx.putImageData(alldata,0,0);
}
</script>
</body>
</html>
639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
