<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>百万豪礼摇一摇</title> <script src="./js/rem.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <style> * { margin: 0px; padding: 0px; border: 0px; list-style: none; }
/* top */ body { background-image: url(‘./img/body.jpg‘) }
.contentBox>ul { display: flex; justify-content: space-around; justify-items: center; margin-top: 0.9rem; }
.contentBox>ul>li { padding: 0px 8px; font-size: 0.7rem; text-align: center; color: transparent; -webkit-text-stroke: 1px #977843; border: 0.02rem solid #977843; border-radius: 0.1rem; }
/* canvars */ #myCanvas { display: block; margin: 0 auto; ">#d1c0a5; margin-top: 0.4rem }
/* iconFont */ .iconFont>ul { display: flex; justify-content: space-around; }
.iconFont>ul>li { text-align: center; margin-top: 0.3rem; color: #977843; font-size: 0.35rem; font-weight: bold; }
.iconFont>ul>li>img { width: 0.7rem; font-weight: bolder; }
.iconFont>img { width: 80%; display: block; margin: 0.4rem auto; display: none; } </style> </head>
<body> <div class="contentBox"> <ul> <li>我</li> <li>是</li> <li>冀</li> <li>企</li> <li>人</li> </ul> <canvas id="myCanvas"></canvas> <div class="iconFont"> <ul id="canvasB"> <li id="beforC"><span> <</span> <p>上一个</p> </li> <li id="clear_btn"><img src="./img/reset.png" > <p>重写</p> </li> <li id="submit"><span>></p></span> <p>下一个</p> </li> </ul> <img src="./img/sunbmit.png" id=‘mIng‘> </div> </div> <script> // 一些标识 var indexC = 0; var isMouseDown = false; var lastLoc = { x: 0, y: 0 }; var lastTimestamp = 0; var lastLineWidth = -1; var locHistory = []; var endTime = ‘‘; var el = document.getElementsByTagName(‘li‘) // canvars准备 var canvasWidth = Math.min(800, $(window).width() - 60); var canvasHeight = canvasWidth; var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); canvas.height = canvasHeight; canvas.width = canvasWidth; // 绘制格子 function drawGrid(fontC) { context.save() //保存工具原始状态 context.strokeStyle = "#977945"; context.beginPath() context.setLineDash([20, 5]) context.moveTo(0, 0) context.lineTo(canvasWidth, 0) context.lineTo(canvasWidth, canvasHeight) context.lineTo(0, canvasHeight) context.closePath()
context.lineWidth = "1" context.stroke()
context.beginPath() context.moveTo(0, 0) context.lineTo(canvasWidth, canvasHeight)
context.moveTo(canvasWidth, 0) context.lineTo(0, canvasHeight)
context.moveTo(canvasWidth / 2, 0) context.lineTo(canvasWidth / 2, canvasHeight)
context.moveTo(0, canvasHeight / 2) context.lineTo(canvasWidth, canvasHeight / 2) context.closePath()
context.lineWidth = "1" context.stroke() // 设置字 context.font = "3rem ‘微软雅黑‘"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillStyle = ‘#e2cfb1‘ context.fillText(fontC, canvas.width / 2, canvas.height / 2); context.restore() //避免影响外部的程序 } drawGrid(‘我‘) // 绘制函数 function beginStroke(point) { isMouseDown = true lastTimestamp = new Date().getTime() lastLoc = windowToCanvas(point.x, point.y) locHistory.push({ x: lastLoc.x, y: lastLoc.y, width: 0, t: lastTimestamp - endTime }) }
function endStroke() { locHistory.push({ x: lastLoc.x, y: lastLoc.y, width: 0, t: 0 }) isMouseDown = false; endTime = new Date().getTime() console.log(locHistory) } // 画笔移动时 function moveStroke(point) { var curLoc = windowToCanvas(point.x, point.y) var curTimestamp = new Date().getTime(); var s = calcDistance(curLoc, lastLoc) var t = curTimestamp - lastTimestamp; var lineWidth = calcLineWidth(t, s) console.log(lineWidth) //draw context.beginPath() context.moveTo(lastLoc.x, lastLoc.y) context.lineTo(curLoc.x, curLoc.y)
locHistory.push({ x: curLoc.x, y: curLoc.y, with: lineWidth, t: t })
context.lineWidth = lineWidth context.lineCap = "round" context.linJoin = "round" context.stroke();
//每次过程结束时，将结束值赋给初始值，一直延续 lastLoc = curLoc lastTimestamp = curTimestamp lastLineWidth = lineWidth
} // pc与app客户画笔 canvas.onmousedown = function (e) { e.preventDefault(); beginStroke({ x: e.clientX, y: e.clientY }) } canvas.onmouseup = function (e) { e.preventDefault(); endStroke() } canvas.onmouseout = function (e) { e.preventDefault(); endStroke() } canvas.onmousemove = function (e) { e.preventDefault(); if (isMouseDown) { moveStroke({ x: e.clientX, y: e.clientY }) } } // 移动端触控 canvas.addEventListener(‘touchstart‘, function (e) { e.preventDefault(); touch = e.touches[0]; beginStroke({ x: touch.pageX, y: touch.pageY }) }) canvas.addEventListener(‘touchmove‘, function (e) { e.preventDefault(); if (isMouseDown) { touch = e.touches[0]; moveStroke({ x: touch.pageX, y: touch.pageY }) } })
canvas.addEventListener(‘touchend‘, function (e) { e.preventDefault(); endStroke() }) // 根据速度计算画笔粗细，计算方式不唯一，可根据需要修改 function calcLineWidth(t, s) { var v = s / t; var resultLineWidth;
if (v <= 0.1) { resultLineWidth = 10; } else if (v >= 10) { resultLineWidth = 4 } else { resultLineWidth = 20 - (v - 0.1) / (10 - 0.1) * (20 - 4) } if (lastLineWidth == -1) { return resultLineWidth } return resultLineWidth = 10; }
function calcDistance(loc1, loc2) { return Math.sqrt((loc1.x - loc2.x) * (loc1.x - loc2.x) + (loc1.y - loc2.y) * (loc1.y - loc2.y)) //通过起始结束坐标x,y值计算路程长度 }
function windowToCanvas(x, y) { var bbox = canvas.getBoundingClientRect(); //获取canvas的位置信息 return { x: Math.round(x - bbox.left), y: Math.round(y - bbox.top) } //返回当前鼠标相对于canvas的位置 } // 判断路径 $(‘#submit‘).click(function () { localStorage.setItem(‘locHistory‘, JSON.stringify(locHistory)) console.log(locHistory) var arrCanvas1 = locHistory[0]; //起始位置 var arrCanvas2 = locHistory[locHistory.length - 1]; //结束位置 if (locHistory == ‘‘) { alert(‘请描写字体‘) } if (indexC == 0) { if (arrCanvas1.x >= 140 && arrCanvas1.x <= 155 && arrCanvas1.y >= 75 && arrCanvas1.y <= 95) { indexC++; // localStorage.setItem(‘locHistory‘, JSON.stringify(locHistory)) // alert(‘成功‘) context.clearRect(0, 0, canvasWidth, canvasHeight); locHistory = []; el[0].style.color = ‘#977843‘ panduan() } else { alert(‘请您正确描写‘); locHistory = []; context.clearRect(0, 0, canvasWidth, canvasHeight) panduan() } return }
if (indexC == 1) { if (arrCanvas1.x >= 100 && arrCanvas1.x <= 120 && arrCanvas1.y >= 75 && arrCanvas1.y <= 90) { indexC++; console.log(indexC) // localStorage.setItem(‘locHistory‘, JSON.stringify(locHistory)) // alert(‘成功‘) context.clearRect(0, 0, canvasWidth, canvasHeight); locHistory = []; console.log(indexC) el[1].style.color = ‘#977843‘ panduan() } else { alert(‘请您正确描写‘); locHistory = []; context.clearRect(0, 0, canvasWidth, canvasHeight) panduan() } return }
if (indexC == 2) { if (arrCanvas1.x >= 130 && arrCanvas1.x <= 150 && arrCanvas1.y >= 60 && arrCanvas1.y <= 80) { indexC++; // localStorage.setItem(‘locHistory‘, JSON.stringify(locHistory)) console.log(indexC) // alert(‘成功‘) context.clearRect(0, 0, canvasWidth, canvasHeight); locHistory = []; console.log(indexC) el[2].style.color = ‘#977843‘ panduan() } else { alert(‘请您正确描写‘); locHistory = []; context.clearRect(0, 0, canvasWidth, canvasHeight) panduan() } return }
if (indexC == 3) { if (arrCanvas1.x >= 150 && arrCanvas1.x <= 180 && arrCanvas1.y >= 70 && arrCanvas1.y <= 90) { indexC++; // localStorage.setItem(‘locHistory‘, JSON.stringify(locHistory)) console.log(indexC) // alert(‘成功‘) context.clearRect(0, 0, canvasWidth, canvasHeight); locHistory = []; console.log(indexC) el[3].style.color = ‘#977843‘ panduan() } else { alert(‘请您正确描写‘); locHistory = []; context.clearRect(0, 0, canvasWidth, canvasHeight) panduan() } return }
if (indexC == 4) { if (arrCanvas1.x >= 150 && arrCanvas1.x <= 180 && arrCanvas1.y >= 70 && arrCanvas1.y <= 90) { indexC++; // localStorage.setItem(‘locHistory‘, JSON.stringify(locHistory)) console.log(indexC) // alert(‘成功‘) context.clearRect(0, 0, canvasWidth, canvasHeight); locHistory = []; console.log(indexC) el[4].style.color = ‘#977843‘ panduan() } else { alert(‘请您正确描写‘); locHistory = []; context.clearRect(0, 0, canvasWidth, canvasHeight) panduan() } return }
}) // 封装index判断 function panduan() { switch (indexC) { case 0: drawGrid(‘我‘); break; case 1: drawGrid(‘是‘); break; case 2: drawGrid(‘冀‘); break; case 3: drawGrid(‘企‘); break; case 4: drawGrid(‘人‘); break; case 5: drawGrid(‘我‘); hd(); break; default: break; } } // 清除按钮 document.getElementById(‘clear_btn‘).onclick = function clearCanvers() { context.clearRect(0, 0, canvasWidth, canvasHeight) localStorage.removeItem(‘locHistory‘) locHistory = []; panduan() } // 上一个按钮 $(‘#beforC‘).click(function () { console.log(indexC) if (indexC > 0) { indexC--; } console.log(indexC) context.clearRect(0, 0, canvasWidth, canvasHeight) locHistory = []; if (indexC <= 0) { el[0].style.color = ‘transparent‘; return drawGrid(‘我‘); } else if (indexC == 1) { el[1].style.color = ‘transparent‘ return drawGrid(‘是‘); } else if (indexC == 2) { el[2].style.color = ‘transparent‘ return drawGrid(‘冀‘); } else if (indexC == 3) { el[3].style.color = ‘transparent‘ return drawGrid(‘企‘); } else if (indexC == 4) { el[4].style.color = ‘transparent‘ return drawGrid(‘人‘); }
}) // 封装隐藏 function hd() { document.getElementById(‘canvasB‘).style.display = "none"; document.getElementById(‘mIng‘).style.display = ‘block‘; } // 确定按钮 $(‘#mIng‘).click(function () { alert(‘点击了确定按钮‘) }) </script> </body>
</html>
