<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paint</title>
<style>
body,
html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
#saveButton {
position: fixed;
top: 10px;
left: 10px;
padding: 10px 20px;
background-color: #fff;
border: 1px solid #000;
cursor: pointer;
z-index: 10;
}
</style>
</head>
<body>
<button id="saveButton">保存图片</button>
<canvas id="drawingCanvas"></canvas>
<script>
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
// 设置画布尺寸为视口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let hue = 0;
const hueChangeInterval = 2; // 每绘制10次改变颜色
function draw(event) {
if (!isDrawing) return;
const x = event.touches ? event.touches[0].clientX : event.clientX;
const y = event.touches ? event.touches[0].clientY : event.clientY;
const dx = x - lastX;
const dy = y - lastY;
const d = Math.sqrt(dx * dx + dy * dy);
ctx.lineWidth = d / 2;
ctx.lineCap = 'round';
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
lastX = x;
lastY = y;
hue++;
if (hue >= 360) {
hue = 0;
}
}
function startDrawing(event) {
const x = event.touches ? event.touches[0].clientX : event.clientX;
const y = event.touches ? event.touches[0].clientY : event.clientY;
lastX = x;
lastY = y;
isDrawing = true;
}
function stopDrawing() {
isDrawing = false;
}
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('touchmove', draw);
canvas.addEventListener('mouseup', stopDrawing);
document.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('touchend', stopDrawing);
document.addEventListener('touchend', stopDrawing);
document.addEventListener('mouseout', stopDrawing);
// 添加保存图片的功能
document.getElementById('saveButton').addEventListener('click', function() {
// 获取屏幕宽度和高度
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
// 创建一个新的canvas
const newCanvas = document.createElement('canvas');
const newCtx = newCanvas.getContext('2d');
newCanvas.width = screenWidth;
newCanvas.height = screenHeight;
// 设置背景颜色为白色
newCtx.fillStyle = '#FFFFFF';
newCtx.fillRect(0, 0, newCanvas.width, newCanvas.height);
// 将原canvas的内容绘制到新canvas上
newCtx.drawImage(canvas, 0, 0, screenWidth, screenHeight);
// 将新canvas的内容转换为图片并保存
const image = newCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
const link = document.createElement('a');
link.download = 'my-drawing.png';
link.href = image;
link.click();
});
</script>
</body>
</html>
彩色渐变画笔
最新推荐文章于 2025-05-07 09:01:12 发布