1.キャンバスとは？
1. HTML5 <canvas> 要素は、スクリプト (通常はJavaScript ) を使用してグラフィックを描画するために使用されます。
2. <canvas> タグは単なるグラフィック コンテナです。スクリプトを使用してグラフィックを描画する必要があります。
3.キャンバスを使用して、パス、ボックス、円、文字を描画し、さまざまな方法で画像を追加できます.
4. canvasc の初期幅と高さ 300,150
2. 機能実現
canvas要素自体には描画機能はありません。すべての描画作業はJavaScript内で行う必要があります。
①機能要件：
1. 必要なコンテンツ: 英数字の組み合わせ (ランダムな長さ 5 ～ 7、ランダムな色、ランダムな位置、ランダムなサイズ); 一部の干渉情報 (線、円) が表示されます。
2.簡単な検証。
②コード部分：
1.html+css コード
<div class="yzm">验证码:</div>
<canvas width="100" height="50"></canvas>
<input type="text">
<button>验证</button>
<div class="trun1">验证成功</div>
<div class="false1">验证失败</div>canvas { background-color: #eee; position: relative; top: 20px; left: 300px; border: 1px solid; } input { width: 180px; height: 35px; font-size: 20px; } button { position: absolute; top: 29px; left: 416px; width: 80px; height: 50px; font-size: 20px; } .yzm { position: absolute; top: 35px; left: 30px; font-size: 26px; } .trun1{ background-color:aqua; width: 189px; height: 20px; text-align: center; position: absolute; left: 115px; display: none; } .false1{ background-color:red; width: 189px; height: 20px; text-align: center; position: absolute; left: 115px; display: none; }2.js コード
var mixin = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNIPQRSTUVWXYZ" // 获取画布 var canvas = document.getElementsByTagName('canvas')[0]; //获取画笔 var ctx = canvas.getContext('2d'); //用来存储验证码 var verify="" //随机验证码的个数 var random = parseInt(getRandom(5, 5)); // 用来控制验证码出现的位置 var offx = 0; for (var i = 0; i < random; i++) { //入栈，保存之前画布的设置 ctx.save() var text = texts(); //随机字体的大小 ctx.font = `${getRandom(15, 30)}px 楷体` // 随机字体的颜色 ctx.fillStyle = `${getRandomColor()}` // ctx.rotate(Math.PI/180*30); //基线 //控制文字的倾斜 if(i%2){ ctx.rotate(Math.PI/180*10) }else{ ctx.rotate(-Math.PI/180*10) } //文字的对齐方式：top文本基线在文本块的顶部。 ctx.textBaseline = 'top'; // 对文本进行渲染 ctx.fillText(text, offx, getRandom(0, 20)) //文本文字进行递增 offx += 20 //存储验证码，方便验证 verify+=text; //出栈恢复为画笔入栈时的状态 ctx.restore(); } //干扰线 //线的起点 ctx.moveTo(getRandom(0, 20), getRandom(0, 50)); //线的终点 ctx.lineTo(getRandom(80, 100), getRandom(0, 50)); //对线进行连接 ctx.closePath(); //进行渲染 默认黑色 ctx.stroke(); ctx.moveTo(getRandom(0, 100), getRandom(0, 10)); ctx.lineTo(getRandom(0, 100), getRandom(40, 50)); ctx.closePath(); ctx.stroke(); //干扰圆 //创建一个新的路径 ctx.beginPath(); ctx.arc(getRandom(25, 75), getRandom(10, 40), getRandom(4, 25), 0, Math.PI * 2); ctx.stroke(); // console.log(verify); //验证 var ipt = document.getElementsByTagName('input')[0]; var btn = document.getElementsByTagName('button')[0]; var trun1 =document.getElementsByClassName('trun1')[0]; var false1 =document.getElementsByClassName('false1')[0]; console.log(trun1); btn.onclick = function(){ var value = ipt.value; value =value.toLowerCase(); verify = verify.toLowerCase(); console.log(verify); // console.log(verify); // console.log(value); if(verify == value){ // console.log("32222"); trun1.style.display = 'block' false1.style.display = 'none' }else{ false1.style.display = 'block' trun1.style.display = 'none' } } //封装一个获取随机的验证码 function texts() { var index = Math.floor(Math.random() * (mixin.length - 1)); return mixin[index]; } //封装一个随机数 function getRandom(min, max) { return Math.random() * (max - min) + min; } //封装一个随机颜色 function getRandomColor() { return `rgb(${getRandom(0, 255)},${getRandom(0, 255)},${getRandom(0, 255)})` }
3. canvas 方式のまとめ
1. 行開始moveTo()終了lineTo()
2.矩形 1.rect(x.y,w,h)2.fillRect()3.strokeRect()
3.円弧 (x、y、r、開始円弧、終了円弧、方向)方向 1 反時計回り 2 時計回り デフォルトは時計回り
4. テキスト strokeText()、fillText() テキストベースライン: textBaseline
5. 影効果 shadowColor shadowBlur shadowOffsetX shadowOffsetY
6. 角丸長方形arcTo(x1, y1, x2, y2, radius)
7. ブラシ スタイルfillStyle = 'color' で塗りつぶしスタイルを設定; strokeStyle = 'color' ストロークの色; lineWidth = '10' ストローク ラインの幅; font = '20px Times New Roman';ストローク レンダリング用のstroke() ;塗りつぶしレンダリングの場合はfill () ; beginPath() はパスを再度開きます; closePath()は現在のパスを閉じます。
8. 保存と復元 save() は現在のキャンバスのプロパティの状態を保存してスタックに格納し、restore()はそれをスタックからポップしてキャンバスの状態を復元します。
9. 絵を描く drawImage(img,x,y,w,h)
10. キャンバスをクリアする clearRect(x, y, width, height) ;,
最後に、修正と追加を歓迎します