彩色渐变画笔-CSDN博客

<!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>