<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="120" height="40"></canvas>
<script type="text/javascript">
var canvas = document.getElementsByTagName(''canvas'')[0];
//开一张2D图
var context = canvas.getContext("2d");
var text = "A、B、C、D、E、F、G、H、I、J、K、L、M、N、O、P、Q、R、S、T、U、V、W、X、Y、Z、a、b、c、d、e、f、g、h、i、j、k、l、m、n、o、p、q、r、s、t、u、v、w、x、y、z、1、2、3、4、5、6、7、8、9、0";
textp = text.split("、");
//绘制一张从(0，0)开始的长120px 宽40px的图
context.strokeRect(0,0,120,40);
draw();
canvas.onclick = function(){
context.clearRect(0,0,120,40);
draw();
};
function draw(){
for(var i = 0;i<4;i++){
x = 20 + 20 * i;
y = 20 + 20 * Math.random();
var index = Math.floor(Math.random()*textp.length);
var txt = textp[index];
//我要写的字样
context.font="bold 20px 微软雅黑";
//我要写的字的颜色
context.fillStyle = getColor();
//我要把txt重获取的随机字符写在位于x与y的坐标上
context.fillText(txt,x,y);
}
//干扰线
for(var i = 0; i<6;i++){
context.beginPath();
context.moveTo(120*Math.random(),40*Math.random());
context.lineTo(120*Math.random(),40*Math.random());
context.strokeStyle = getColor();
context.stroke();
}
function getColor(){
var red = Math.floor(Math.random()*256);
var green = Math.floor(Math.random()*256);
var blue = Math.floor(Math.random()*256);
return "rgb("+red+","+green+","+blue+")";
}
}
function randNum(){
return
}
</script>
</body>
</html>
免责声明
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
q6106579002021/1/25 22:15:59
