当前位置：首页 > news >正文

如何利用网站做淘宝客珠海网络推广公司

news 2025/8/11 7:15:00

如何利用网站做淘宝客,珠海网络推广公司,怎么查网站是否被k,dede如何制作网站地图纯属对Canvas API的练习效果图： 目标： 1.画布中随机出现4个字母或数字的验证码 2.验证吗，内容随机，颜色随机，位置在当前块内随机； 3.添加4条干扰线，颜色长度随机 4.添加50个干扰颗粒&#xff0…

纯属对Canvas API的练习

效果图：

目标：

1.画布中随机出现4个字母或数字的验证码

2.验证吗，内容随机，颜色随机，位置在当前块内随机；

3.添加4条干扰线，颜色长度随机

4.添加50个干扰颗粒，颜色随机，半径为1；

思路：

1.由于使用随机数据多，所以封装随机数函数 rn(min,max)

function rn(min,max){return Math.floor(Math.random()*(max-min)+min);}
//返回大于等于min ,小于max的数字

2.由于随机颜色使用多，封装随机颜色函数 rc(min,max)

function rc(min,max){var r=rn(min,max);var g=rn(min,max);var b=rn(min,max);return `rgb(${r},${g},${b})`;
}

3.创建字符串，包含验证码的数据，随机下标抽取四次，并绘制在画布上

//验证吗数据
var pool='ABCDEFGHEIJDKMNP123456789';
//绘制4次for(var i=0;i<4;i++){var txt=pool[rn(0,pool.length)];ctx.font="10px Arial";ctx.save();
//获取文本宽度var tw=ctx.measureText(txt).width;
//以中心旋转，旋转角度（0-90）随机ctx.translate(30*i+15,10);ctx.rotate(rn(0,90)*Math.PI/180);ctx.fillStyle=rc(80,140);ctx.textBaseline="top";
//绘制文本ctx.fillText(txt,rn(-10,10-tw),rn(-10,10-10))ctx.restore();}

4.6条干扰线

  for(var i=0;i<6;i++){ctx.beginPath();ctx.strokeStyle=rc(60,120);ctx.moveTo(rn(0,w),rn(0,h));ctx.lineTo(rn(0,w),rn(0,h));ctx.stroke();}

5. 50个干扰点

  for(var i=0;i<50;i++){ctx.beginPath();ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);ctx.fillStyle=rc(0,255);ctx.fill();}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{text-align: center}</style>
</head>
<body>
<h3>Canvas绘制画布</h3>
<canvas id="c1"></canvas>
<script>var w=120;var h=30;c1.width=w;c1.height=h;var ctx=c1.getContext("2d");ctx.fillStyle=rc(200,250);ctx.fillRect(0,0,w,h);
//  绘制随机文本var pool='ABCDEFGHEIJDKMNP123456789';for(var i=0;i<4;i++){var txt=pool[rn(0,pool.length)];ctx.font="10px Arial";ctx.save();var tw=ctx.measureText(txt).width;ctx.translate(30*i+15,10);ctx.rotate(rn(0,90)*Math.PI/180);ctx.fillStyle=rc(80,140);ctx.textBaseline="top";ctx.fillText(txt,rn(-10,10-tw),rn(-10,10-10))ctx.restore();}
//  绘制随机6条干扰线for(var i=0;i<6;i++){ctx.beginPath();ctx.strokeStyle=rc(60,120);ctx.moveTo(rn(0,w),rn(0,h));ctx.lineTo(rn(0,w),rn(0,h));ctx.stroke();}
//  50个干扰点，半径为1的圆for(var i=0;i<50;i++){ctx.beginPath();ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);ctx.fillStyle=rc(0,255);ctx.fill();}
//  随机颜色
function rc(min,max){var r=rn(min,max);var g=rn(min,max);var b=rn(min,max);return `rgb(${r},${g},${b})`;}
//  随机数字function rn(min,max){return Math.floor(Math.random()*(max-min)+min);}</script>
</body>
</html>