150行代码实现一个极简的Canvas多功能画板

已于 2023-12-13 14:12:30 修改
阅读量2.7k 收藏 119
点赞数 137
分类专栏： # canvas 文章标签： canvas
于 2023-11-01 19:51:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43288600/article/details/134126408
版权

目录

前言

大家好，我是南木元元，热衷分享有趣实用的文章。HTML5提供的Canvas标签能实现很多有趣的效果，本文就来分享一下如何使用Canvas来实现一个极简的多功能画板。

演示效果

话不多说，先来看完成后的效果：

在这里插入图片描述

主要实现以下功能：

  1. 画笔
  2. 橡皮擦
  3. 清屏
  4. 前进
  5. 后退

下面我们就来一步步实现。

多功能画板的实现

画板初始化

首先，准备一个canvas画板容器，后续所有的操作都将在这个容器上进行绘制。

<!-- 画板容器 -->
<canvas id="canvas"></canvas>

<!-- 参数配置栏，样式可以自行定义 -->
<div class="toolBar">
    <p><b>画笔</b></p>
    <div>
        <span>颜色：</span>
        <input type="color" id="colorSelect" />
    </div>
    <div>
        <span>宽度：</span>
        <input type="range" min="1" max="30" value="1" id="widthRange" />
        <span id="widthValue">1</span>
    </div>
    <p><b>工具栏</b></p>
    <div class="tool">
        <button class="btn" id="eraser">橡皮擦</button>
        <button class="btn" id="clear">清屏</button>
        <button class="btn" id="undo">后退</button>
        <button class="btn" id="redo">前进</button>
    </div>
</div>

获取二维绘图渲染上下文

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

画板初始化：这里主要做两件事，一个是设置画布为全屏，一个是初始化线条的样式。

function initCanvas() {
  //设置画布为全屏
  const pageWidth = document.documentElement.clientWidth;
  const pageHeight = document.documentElement.clientHeight;
  canvas.width = pageWidth;
  canvas.height = pageHeight;
  //初始化线条样式
  ctx.lineCap = "round";//线段末端为圆形
  ctx.lineJoin = "round";//两线段连接处为圆形
  ctx.lineWidth = 1;
  ctx.strokeStyle = "#000";
}

注意，这里设置了lineCap和lineJoin为round，是为了实现更自然的画笔效果。
在这里插入图片描述 在这里插入图片描述
如上图所示，上面一行是默认的效果，下面一行是设置为round后的效果。

画笔

先封装画点和画线的两个方法

//画点
function drawPoint(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, ctx.lineWidth / 2, 0, 2 * Math.PI, false);
  ctx.fill();
}
//画线
function drawLine({ x1, y1, x2, y2 }) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

接下来需要监听鼠标事件，在鼠标移动过程中记录鼠标坐标位置，通过drawLine()方法进行绘制。

//记录画笔最后一次的位置
let lastPoint = null;

function listenEvent() {
  //鼠标按下事件
  canvas.addEventListener("mousedown", (e) => {
    const x = e.clientX;
    const y = e.clientY;
	drawPoint(x, y);//鼠标按下就画一个点
    lastPoint = { x, y };//记录每次按下时点的位置
    //鼠标移动事件
    canvas.addEventListener("mousemove", moveDraw);
    //鼠标松开事件
    canvas.addEventListener("mouseup", (e) => {
      canvas.removeEventListener("mousemove", moveDraw);
    });
  });
}
//移动时不断画线和记录鼠标位置
function moveDraw(e) {
  const x2 = e.clientX;
  const y2 = e.clientY;
  drawLine({ ...lastPoint, x2, y2 });
  lastPoint = { x: x2, y: y2 };
}

现在就已经初步实现一个画笔的效果：
在这里插入图片描述
接着实现画笔颜色和宽度的动态设置，只需监听颜色选择器和宽度的input事件即可，发生变化时重新赋值。

const colorSelect = document.getElementById("colorSelect");
const widthRange = document.getElementById("widthRange");
const widthValue = document.getElementById("widthValue");

function listenEvent() {
  //鼠标按下事件
  canvas.addEventListener("mousedown", (e) => {...});
  
  //监听颜色选择器变化
  colorSelect.addEventListener("input", function () {
    ctx.strokeStyle = this.value; 
  });
  //监听宽度变化
  widthRange.addEventListener("input", function () {
    widthValue.textContent = this.value;
    ctx.lineWidth = this.value;
  });
}

效果如下：
在这里插入图片描述

橡皮擦

实现思路很简单，点击橡皮擦时，直接让之后绘制的线条颜色与画板背景色保持一致即可，并且可以设置橡皮擦即线条的宽度，但是有一点要注意，当再次切换为画笔即选择颜色时，需要重新设置线条宽度。

const eraser = document.getElementById("eraser");

function listenEvent() {
  ...
  
  colorSelect.addEventListener("input", function () {
    ...
    ctx.lineWidth = widthRange.value; //从橡皮擦切换回画笔时需要重新设置宽度
  });

  ...
  
  //橡皮擦
  eraser.addEventListener("click", () => {
    ctx.strokeStyle = "#fff";
    ctx.lineWidth = 5;
  });
}

来看效果：
在这里插入图片描述

清屏

清屏的实现思路很简单，直接调用clearRect方法设置所有像素都是透明即可。

const clear = document.getElementById("clear");

function listenEvent() {
  ...
  //清屏
  clear.addEventListener("click", () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  });
}

前进和后退

前进和后退的实现思路：利用两个数组来分别保存绘制的记录和撤销的记录，当点击后退（撤销）时，将绘制数组中最后一条记录转移到撤销记录数组中，当点击前进（重做）时，将撤销数组中最后一条记录重新转移到绘制数组中，然后遍历绘制数组进行重绘即可。

首先定义两个数组：drawData数组——保存绘制的记录；revokedData数组——保存撤销的记录。

const drawData = []; //保存绘制的记录
const revokedData = []; //保存撤销的记录

每次绘制时需要保存当前线段的信息：起始点，坐标位置数组，颜色，线宽。

//记录线段信息
function recordInfo(type, data) {
  switch (type) {
    case "moveTo":
      drawData.push({
        moveTo: [...data],
        lineTo: [],
        color: ctx.strokeStyle,
        width: ctx.lineWidth,
      });
      break;
    case "lineTo":
      drawData[drawData.length - 1]["lineTo"].push([...data]);
      break;
    default:
      break;
  }
}

canvas.addEventListener("mousedown", (e) => {
  const x = e.clientX;
  const y = e.clientY;

  lastPoint = { x, y };
  
  //记录每个线段起始位置
  recordInfo("moveTo", [x, y]);
  
  drawPoint(x, y);
  canvas.addEventListener("mousemove", moveDraw);
  canvas.addEventListener("mouseup", (e) => {
    canvas.removeEventListener("mousemove", moveDraw);
  });
});

function moveDraw(e) {
  const x2 = e.clientX;
  const y2 = e.clientY;
  drawLine({ ...lastPoint, x2, y2 });
  
  //记录每个线段除起始点外的位置
  recordInfo("lineTo", [x2, y2]);
  
  lastPoint = { x: x2, y: y2 };
}
  • 后退：将drawData绘制数组中最后一条记录转移到revokedData撤销记录数组中，遍历drawData进行重绘。
  • 前进：将revokedData撤销数组中最后一条记录重新转移到drawData绘制数组中，遍历drawData进行重绘。
function listenEvent() {
  ...
  
  //后退(撤销)
  undo.addEventListener("click", () => {
    //把绘制的最后一条记录放入撤销的容器中
    drawData.length > 0 && revokedData.push(drawData.pop());
    //重绘
    reDraw();
    //当有一个为空时，需要重新设置颜色和宽度
    if (!drawData.length || !revokedData.length) {
      ctx.strokeStyle = colorSelect.value;
      ctx.lineWidth = widthRange.value;
    }
  });

  //前进(重做)
  redo.addEventListener("click", () => {
    //把撤销的容器中最后一条记录放入需要绘制的容器中
    revokedData.length > 0 && drawData.push(revokedData.pop());
    //重绘
    reDraw();
    //当有一个为空时，需要重新设置颜色和宽度
    if (!drawData.length || !revokedData.length) {
      ctx.strokeStyle = colorSelect.value;
      ctx.lineWidth = widthRange.value;
    }
  });
}
//取出drawData中保存的数据进行一一绘制
function reDraw() {
  //重绘前清空画布
  ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
  //重绘
  drawData.forEach((item) => {
    ctx.beginPath();
    const { moveTo, lineTo, color, width } = item;
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.moveTo(...moveTo);
    lineTo.forEach((line) => {
      ctx.lineTo(...line);
    });
    ctx.stroke();
  });
}

完整代码如下：

const drawData = []; //保存绘制的记录
const revokedData = []; //保存撤销的记录

function listenEvent() {
  //鼠标按下事件
  canvas.addEventListener("mousedown", (e) => {
    const x = e.clientX;
    const y = e.clientY;

    lastPoint = { x, y };
    recordInfo("moveTo", [x, y]);
    drawPoint(x, y);
    //鼠标移动事件
    canvas.addEventListener("mousemove", moveDraw);
    //鼠标松开事件
    canvas.addEventListener("mouseup", (e) => {
      canvas.removeEventListener("mousemove", moveDraw);
    });
  });
  
  ...
  
  //后退(撤销)
  undo.addEventListener("click", () => {
    drawData.length > 0 && revokedData.push(drawData.pop());
    reDraw();
    if (!drawData.length || !revokedData.length) {
      ctx.strokeStyle = colorSelect.value;
      ctx.lineWidth = widthRange.value;
    }
  });

  //前进(重做)
  redo.addEventListener("click", () => {
    revokedData.length > 0 && drawData.push(revokedData.pop());
    reDraw();
    if (!drawData.length || !revokedData.length) {
      ctx.strokeStyle = colorSelect.value;
      ctx.lineWidth = widthRange.value;
    }
  });
}

function moveDraw(e) {
  const x2 = e.clientX;
  const y2 = e.clientY;

  drawLine({ ...lastPoint, x2, y2 });
  recordInfo("lineTo", [x2, y2]);
  lastPoint = { x: x2, y: y2 };
}
//重绘
function reDraw() {
  ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
  drawData.forEach((item) => {
    ctx.beginPath();
    const { moveTo, lineTo, color, width } = item;
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.moveTo(...moveTo);
    lineTo.forEach((line) => {
      ctx.lineTo(...line);
    });
    ctx.stroke();
  });
}
//记录线段信息
function recordInfo(type, data) {
  switch (type) {
    case "moveTo":
      drawData.push({
        moveTo: [...data],
        lineTo: [],
        color: ctx.strokeStyle,
        width: ctx.lineWidth,
      });
      break;
    case "lineTo":
      drawData[drawData.length - 1]["lineTo"].push([...data]);
      break;
    default:
      break;
  }
}

现在让我们来看下前进和后退的效果：
在这里插入图片描述

结语

本文主要实现了一个极简的Canvas多功能画板，还有很多功能没写上，如多层图、保存等，后续可以继续完善。

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~

南木元元
关注
  • 137
    点赞
  • 踩
  • 119
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 202
    评论
专栏目录
基于canvas实现的多功能画板
weixin_44719258的博客
09-23 773
基于canvas实现的多功能画板，目前已完成第一版，功能包括画笔、橡皮擦、撤回、清除画板、保存、图层、拖拽...
canvas实现一个简易画板
notagoodwriter的博客
11-08 899
canvas实现基础画板
Canvas写一个画板
weixin_56674431的博客
04-04 601
html5的canvas做一个简易的画板
canvas实现简易画板
想好了再写！
06-26 390
/ 获取鼠标在画布内的坐标。// 获取鼠标在画布内的坐标。2、保存签名实现下载功能。
用canvas实现在线画板,带你找回童年乐趣
qq_63204040的博客
07-13 772
canvas制作在线画板
使用Canvas制作画板
weixin_60895836的博客
07-31 504
UNDO: 'z',REDO: 'b'这部分代码定义了画板应用的状态和常量。state对象用于跟踪用户的操作和绘制数据。DATA_FIELD和DATA_TYPE用于标识绘制数据的不同部分。定义了画布的一些默认值，包括默认颜色、线条样式和线条宽度。KEYBOARD定义了用于撤销和重做的键盘按键。
HTML5 canvas多功能涂鸦画板绘图代码.zip
05-23
这个"HTML5 canvas多功能涂鸦画板绘图代码"项目利用了canvas和jQuery库来实现一个功能丰富的在线绘图应用程序。以下是关于这个项目的详细知识点： 1. **HTML5 Canvas**：Canvas是一个HTML5标签，它提供了一个二维...
基于canvas实现的多功能画板代码.zip
09-12
【标题】"基于canvas实现的多功能画板代码.zip"是一个包含使用HTML5 Canvas技术构建的多功能画板的项目。这个项目已经成功地被整合到多个实际项目中，展示了Canvas在图形绘制和交互式用户界面方面的强大功能。 ...
HTML5+canvas实现的画板功能特效代码
03-20
在这个“HTML5+canvas实现的画板功能特效代码”中，我们可以探索如何利用HTML5的Canvas元素创建一个互动式的画板应用。 1. HTML5 Canvas基础： - Canvas是一个HTML标签，通过`<canvas>`在网页上创建一块可绘制的...
HTML5 canvas实现的画板功能代码.zip
07-04
这个“HTML5 canvas实现的画板功能代码.zip”压缩包很显然是一个包含实现画板功能的JavaScript代码示例。在本文中，我们将深入探讨HTML5 canvas的画板功能及其相关知识点，以及如何利用JavaScript来实现这一功能。 ...
canvas实现的画板
05-18
用html5的canvas实现的一个简易的画板，可以画直线、矩形、圆形，可以选择线条粗细和线条颜色’
通过canvas实现简易画板
11-26
刚开始学HTML5中的canvas，实现的一个简易的画板。（只注重了功能的实现，没有对样式添加太多）
HTML5 Canvas签名画板功能代码.zip
07-11
在本资源"HTML5 Canvas签名画板功能代码"中，我们找到了一个实现签名画板功能的JavaScript代码实现。这个功能通常用于网站的用户签署电子文档或者进行手写输入，例如电子商务网站的收货确认或电子合同。 首先，...
原生 canvas 实现一个画板案例
学而不思则罔,思而不学则殆
11-14 1261
原生 canvas 实现一个画板案例
基于canvas的自定义画板软件
豆包程序员
05-23 318
HTML5其中一个最具代表性的新特性就是canvas，通过canvas可以对2D或位图进行东涛、脚本的渲染，它能帮助用户画出很多有趣并且精美的作品，其中有很多类似Windows画板的功能，包括铅笔、画直线、圆、矩形、插入文字等功能。和以前的版本不同是，HTML5带来了很多的新特性，包括饰品、音频、图像、动画很多都被标准化，随着互联网的进步，HTML5的技术也越来越被人们接受和认可。橡皮檫：去除作品不需要的东西，通过橡皮擦，就能够进行相关的功能操作，擦除画板的图像。颜色工具：点击选择不同的颜色进行绘画。
canvas学习（四）:简单画板
weixin_43909743的博客
08-30 1518
前言 canvas实现画板功能，有画笔、矩形、圆形、线段粗细、画笔颜色等功能 是对canvas的综合学习回顾 步骤 基本样式 <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ width: 100vw; height: 100vh; display: flex; flex
canvas实现简单画板
harmsworth的博客
07-04 6006
前言 canvas 可以实现鼠标或者手指作画。具体用到了 mouse 事件和 touch 事件。下面就实现了一个简单的画板，实际效果如下： 解析 在页面中，有文字、按钮，有包裹进度条的块。 有如下需求： 线条能在按钮上显示，并且按钮能点击 进度条所在 div 块上能作画，并且进度条块能点击 目前已经实现了第一个需求，您可以点击这里：简单画板-进度条不能画线 代码 <!DOCTYPE html> <html lang="en"> <head> <meta c
canvas实现画板功能
weixin_48956666的博客
07-16 572
canvas实现画板功能
原生小案例：如何使用HTML5 Canvas构建画板应用程序
最新发布
前端达人
08-23 932
使用HTML5 Canvas构建绘图应用是在Web浏览器中创建交互式和动态绘图体验的绝佳方式。HTML5 Canvas元素提供了一个绘图表面，允许您操作像素并以编程方式创建各种形状和图形。本文将为您提供使用HTML5 Canvas创建绘图应用的概述和指导。此外，它还将通过解释HTML设置、JavaScript实现、用户交互和绘图功能来帮助您理解构建绘图应用的步骤。HTML canvas标签是一个H...
用canvas实现一个画板
04-21
好的，下面是实现一个画板的代码： ``` <!DOCTYPE html> <title>Canvas 画板 #canvas { border: 1px solid #000; } <canvas id="canvas" width="400" height="400"></canvas> var canvas = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 202
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南木元元

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值