<!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;
???????????
???????}
???????.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;
???????????ul {
???????????display: flex;
???????????justify-content: space-around;
???????}
???????.iconFont>ul>li {
???????????text-align: center;
???????????
???????????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 >
???????<ul>
???????????<li>我</li>
???????????<li>是</li>
???????????<li>冀</li>
???????????<li>企</li>
???????????<li>人</li>
???????</ul>
???????<canvas ></canvas>
???????<div >
???????????<ul >
???????????????<li ><span>
???????????????????????<</span> <p>上一个</p>
???????????????</li>
???????????????<li ><img src="./img/reset.png" >
???????????????????<p>重写</p>
???????????????</li>
???????????????<li ><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>
js画布写字描字
原文地址：https://www.cnblogs.com/liuliang389897172/p/10114082.html