用Canvas打造创意涂鸦板

2023-11-11 08:39:25

canvas——涂鸦板

各位画家，拿起你的鼠标，我们开始在Canvas上发挥创意，畅快涂鸦吧！

简介

Canvas涂鸦板基于 HTML5 Canvas 元素，这是一种用于在网页上绘制图形的强大工具，让我们能够在网页上创建和修改图像。使用 Canvas，我们可以绘制各种图形、线条、文本，甚至添加保存图片的功能。在本文中，我们将使用 Canvas 创建一个简单的涂鸦板，能够满足多种创作需求。

创建画布

首先，我们需要创建一个 Canvas 元素。Canvas 元素就像一个空白画布，我们可以通过JavaScript在上面绘制任何东西。

<canvas id="canvas" width="800" height="600"></canvas>

初始化 Canvas

接下来，我们需要通过 JavaScript 获取Canvas的上下文对象(context)，它允许我们在Canvas上进行绘图。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

构建涂鸦板

现在，我们已经完成了Canvas的初始化，就可以开始创建涂鸦板了。

//设置画笔颜色
ctx.strokeStyle = 'red';

//设置画笔粗细
ctx.lineWidth = 5;

//设置是否自动绘制
let isDrawing = false;

//鼠标按下事件监听器
canvas.addEventListener('mousedown', e => {
  isDrawing = true;
});

//鼠标松开事件监听器
canvas.addEventListener('mouseup', e => {
  isDrawing = false;
});

//鼠标移动事件监听器
canvas.addEventListener('mousemove', e => {
  if (isDrawing) {
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
  }
});

添加功能

现在，我们的涂鸦板已经可以使用了，但还可以添加更多功能来使其更有趣。

添加背景图
我们可以让用户选择一张背景图，并将其显示在涂鸦板上。

//创建背景图上传元素
const backgroundInput = document.getElementById('background-input');

//添加背景图上传事件监听器
backgroundInput.addEventListener('change', e => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = e => {
    const img = new Image();
    img.src = e.target.result;
    img.onload = () => {
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    }
  }

  reader.readAsDataURL(file);
});

自动涂鸦
我们可以创建一个简单的自动涂鸦功能，让涂鸦板自动生成线条。

let autoDrawing = false;

//自动涂鸦按钮元素
const autoDrawingButton = document.getElementById('auto-drawing-button');

//添加自动涂鸦按钮事件监听器
autoDrawingButton.addEventListener('click', e => {
  autoDrawing = !autoDrawing;

  if (autoDrawing) {
    //开始自动涂鸦
    setInterval(() => {
      ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
      ctx.stroke();
    }, 100);
  } else {
    //停止自动涂鸦
    clearInterval(interval);
  }
});