<!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>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<button onclick="setCanvasType('pen')">笔</button>
<button onclick="setCanvasType('eraser')">橡皮擦</button>
<button onclick="setColor('#ff0000')">红色</button>
<button onclick="setCanvasType('circle')">圆形</button>
<canvas id="canvas">您的浏览器不支持canvas</canvas>
<script>
window.onload = function () {
let canvas = document.getElementById('canvas')
canvas.height = window.innerHeight
canvas.width = window.innerWidth
let ctx = canvas.getContext('2d')
let canvasType = 'pen'
let draw = false
let lastX, lastY
window.addEventListener('mousemove', e => {
if (draw) {
switch (canvasType) {
case 'pen':
penDraw(e.x, e.y)
break;
case 'circle':
// circleDraw(e.x, e.y)
break;
case 'eraser':
eraserDraw(e.x, e.y)
break;
default:
break;
}
}
})
function penDraw(x, y) {
ctx.lineTo(x, y)
ctx.stroke()
}
function circleDraw(x, y) {
let circleX, circleY, r
circleX = Math.round(Math.abs(x + lastX) / 2)
circleY = Math.round(Math.abs(y + lastY) / 2)
//勾股定理
r = Math.round(Math.sqrt(Math.pow(Math.abs(x - lastX), 2) + Math.pow(Math.abs(y - lastY), 2)) / 2)
console.log(circleX, circleY, r)
ctx.beginPath();
ctx.arc(circleX, circleY, r, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
let a = 50
function eraserDraw(x, y) {
ctx.save()
ctx.beginPath()
ctx.arc(x, y, a, 0, 2 * Math.PI);
ctx.clip()
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
}
canvas.addEventListener('mousedown', e => {
ctx.moveTo(e.x, e.y)
if (canvasType === 'circle') {
lastX = e.x
lastY = e.y
}
draw = true
})
canvas.addEventListener('mouseup', e => {
draw = false
if (canvasType == 'circle') {
circleDraw(e.x, e.y)
lastX = null
lastY = null
}
})
setCanvasType = function (e) {
canvasType = e
}
setColor = function (color) {
if (canvasType !== 'pen') {
canvasType = 'pen'
}
ctx.strokeStyle = color
}
}
</script>
</body>
</html>
学而思公司福利 237人发布