<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="" id="type">
<option value="1">画笔</option>
<option value="0">橡皮</option>
</select>
<input type="color" name="" id="cc">
<input type="range" step='2' max='20' min="1" id="ww">
<canvas id='cv' width="500" height="500px" style="border: 1px solid red;"></canvas>
<script>
let type = document.getElementById('type')
let canvas = document.getElementById('cv')
let ctx = canvas.getContext('2d')
let canMove = false
canvas.onmousedown = function (e) {
canMove = true
ctx.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop)
ctx.beginPath()
}
window.onmouseup = function () {
canMove = false
ctx.closePath();
}
canvas.onmousemove = function (e) {
if (canMove) {
if (parseInt(type.value)) {
ctx.lineTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop)
ctx.stroke()
} else {
ctx.clearRect(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, 40, 40)
}
}
}
let ww = document.getElementById('ww')
let save = document.getElementById('save')
let cc = document.getElementById('cc')
save.onclick = () => {
let str = canvas.toDataURL('image/png');
console.log(str);
}
cc.onchange = () => {
ctx.strokeStyle = cc.value
}
ww.onchange = () => {
ctx.lineWidth = ww.value
}
</script>
</body>
</html>
Canvas制作简单画板可擦出系列
最新推荐文章于 2024-09-22 11:17:00 发布