js画布写字描字
<!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" alt="">
<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>
