系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站！

组装电脑|监控安装|打印机 |投影机 |数据库 |CMS教程 |服务器设置 |网页制作 |网络编程 | 脚本专栏 |重装教程 | 如何安装系统？ |
网站导航

系统下载

Win10系统 Win8系统 Win7系统 WinXP系统 路由器

软件下载

电脑软件 安卓软件 安卓应用 安卓游戏

文章资讯

IT资讯 系统教程 软件教程 U盘教程 系统帮助

系统相关

系统主题 Win10激活工具 Win8激活工具 Win7激活工具

专题合集

软件合集 教程专题 安卓推荐
电脑配置
配置清单 品牌机 组装机 一体机 笔记本
软件
  • 软件
  • 文章
  • 安卓
搜 索

热搜：番茄花园 电脑公司 萝卜家园 深度技术 雨林木风

首页 XP系统 Win7系统 Win10系统 win11系统 在线装机 U盘启动 系统教程 IT资讯
Win8系统 Linux系统 Server系统 U PE教程 重装大师 装机精灵 网络知识 bios设置 电脑配置
当前位置：首页 > 网页制作 > html5 > 详细页面

canvas进阶之如何画出平滑的曲线

时间：2019-12-05来源：系统城作者：电脑系统城

背景概要

相信大家平时在学习canvas 或 项目开发中使用canvas的时候应该都遇到过这样的需求：实现一个可以书写的画板小工具。

嗯，相信这对canvas使用较熟的童鞋来说仅仅只是几十行代码就可以搞掂的事情，以下demo就是一个再也简单不过的例子了：


 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Sketchpad demo</title>
  5. <style type="text/css">
  6. canvas {
  7. border: 1px blue solid;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <canvas id="canvas" width="800" height="500"></canvas>
  13. <script type="text/javascript">
  14. let isDown = false;
  15. let beginPoint = null;
  16. const canvas = document.querySelector('#canvas');
  17. const ctx = canvas.getContext('2d');
  18.  
  19. // 设置线条颜色
  20. ctx.strokeStyle = 'red';
  21. ctx.lineWidth = 1;
  22. ctx.lineJoin = 'round';
  23. ctx.lineCap = 'round';
  24.  
  25. canvas.addEventListener('mousedown', down, false);
  26. canvas.addEventListener('mousemove', move, false);
  27. canvas.addEventListener('mouseup', up, false);
  28. canvas.addEventListener('mouseout', up, false);
  29.  
  30. function down(evt) {
  31. isDown = true;
  32. beginPoint = getPos(evt);
  33. }
  34.  
  35. function move(evt) {
  36. if (!isDown) return;
  37. const endPoint = getPos(evt);
  38. drawLine(beginPoint, endPoint);
  39. beginPoint = endPoint;
  40. }
  41.  
  42. function up(evt) {
  43. if (!isDown) return;
  44.  
  45. const endPoint = getPos(evt);
  46. drawLine(beginPoint, endPoint);
  47.  
  48. beginPoint = null;
  49. isDown = false;
  50. }
  51.  
  52. function getPos(evt) {
  53. return {
  54. x: evt.clientX,
  55. y: evt.clientY
  56. }
  57. }
  58.  
  59. function drawLine(beginPoint, endPoint) {
  60. ctx.beginPath();
  61. ctx.moveTo(beginPoint.x, beginPoint.y);
  62. ctx.lineTo(endPoint.x, endPoint.y);
  63. ctx.stroke();
  64. ctx.closePath();
  65. }
  66. </script>
  67. </body>
  68. </html>

它的实现逻辑也很简单：

  • 我们在canvas画布上主要监听了三个事件：mousedown、mouseup和mousemove，同时我们也创建了一个isDown变量；
  • 当用户按下鼠标（mousedown，即起笔）时将isDown置为true，而放下鼠标（mouseup）的时候将它置为false，这样做的好处就是可以判断用户当前是否处于绘画状态；
  • 通过mousemove事件不断采集鼠标经过的坐标点，当且仅当isDown为true（即处于书写状态）时将当前的点通过canvas的lineTo方法与前面的点进行连接、绘制；

通过以上几个步骤我们就可以实现基本的画板功能了，然而事情并没那么简单，仔细的童鞋也许会发现一个很严重的问题——通过这种方式画出来的线条存在锯齿，不够平滑，而且你画得越快，折线感越强。表现如下图所示：

为什么会这样呢？

问题分析

出现该现象的原因主要是：

我们是以canvas的lineTo方法连接点的，连接相邻两点的是条直线，非曲线，因此通过这种方式绘制出来的是条折线；

受限于浏览器对mousemove事件的采集频率，大家都知道在mousemove时，浏览器是每隔一小段时间去采集当前鼠标的坐标的，因此鼠标移动的越快，采集的两个临近点的距离就越远，故“折线感越明显“；

如何才能画出平滑的曲线?

要画出平滑的曲线，其实也是有方法的，lineTo靠不住那我们可以采用canvas的另一个绘图API——quadraticCurveTo ，它用于绘制二次贝塞尔曲线。

二次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)

调用quadraticCurveTo方法需要四个参数，cp1x、cp1y描述的是控制点，而x、y则是曲线的终点：

更多详细的信息可移步MDN

既然要使用贝塞尔曲线，很显然我们的数据是不够用的，要完整描述一个二次贝塞尔曲线，我们需要：起始点、控制点和终点，这些数据怎么来呢？

有一个很巧妙的算法可以帮助我们获取这些信息

获取二次贝塞尔关键点的算法

这个算法并不难理解，这里我直接举例子吧：

假设我们在一次绘画中共采集到6个鼠标坐标，分别是A, B, C, D, E, F；取前面的A, B, C三点，计算出B和C的中点B1，以A为起点，B为控制点，B1为终点，利用quadraticCurveTo绘制一条二次贝塞尔曲线线段；

接下来，计算得出C与D点的中点C1，以B1为起点、C为控制点、C1为终点继续绘制曲线；

依次类推不断绘制下去，当到最后一个点F时，则以D和E的中点D1为起点，以E为控制点，F为终点结束贝塞尔曲线。

OK，算法就是这样，那我们基于该算法再对现有代码进行一次升级改造：


 
  1. let isDown = false;
  2. let points = [];
  3. let beginPoint = null;
  4. const canvas = document.querySelector('#canvas');
  5. const ctx = canvas.getContext('2d');
  6.  
  7. // 设置线条颜色
  8. ctx.strokeStyle = 'red';
  9. ctx.lineWidth = 1;
  10. ctx.lineJoin = 'round';
  11. ctx.lineCap = 'round';
  12.  
  13. canvas.addEventListener('mousedown', down, false);
  14. canvas.addEventListener('mousemove', move, false);
  15. canvas.addEventListener('mouseup', up, false);
  16. canvas.addEventListener('mouseout', up, false);
  17.  
  18. function down(evt) {
  19. isDown = true;
  20. const { x, y } = getPos(evt);
  21. points.push({x, y});
  22. beginPoint = {x, y};
  23. }
  24.  
  25. function move(evt) {
  26. if (!isDown) return;
  27.  
  28. const { x, y } = getPos(evt);
  29. points.push({x, y});
  30.  
  31. if (points.length > 3) {
  32. const lastTwoPoints = points.slice(-2);
  33. const controlPoint = lastTwoPoints[0];
  34. const endPoint = {
  35. x: (lastTwoPoints[0].x + lastTwoPoints[1].x) / 2,
  36. y: (lastTwoPoints[0].y + lastTwoPoints[1].y) / 2,
  37. }
  38. drawLine(beginPoint, controlPoint, endPoint);
  39. beginPoint = endPoint;
  40. }
  41. }
  42.  
  43. function up(evt) {
  44. if (!isDown) return;
  45. const { x, y } = getPos(evt);
  46. points.push({x, y});
  47.  
  48. if (points.length > 3) {
  49. const lastTwoPoints = points.slice(-2);
  50. const controlPoint = lastTwoPoints[0];
  51. const endPoint = lastTwoPoints[1];
  52. drawLine(beginPoint, controlPoint, endPoint);
  53. }
  54. beginPoint = null;
  55. isDown = false;
  56. points = [];
  57. }
  58.  
  59. function getPos(evt) {
  60. return {
  61. x: evt.clientX,
  62. y: evt.clientY
  63. }
  64. }
  65.  
  66. function drawLine(beginPoint, controlPoint, endPoint) {
  67. ctx.beginPath();
  68. ctx.moveTo(beginPoint.x, beginPoint.y);
  69. ctx.quadraticCurveTo(controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
  70. ctx.stroke();
  71. ctx.closePath();
  72. }

在原有的基础上，我们创建了一个变量points用于保存之前mousemove事件中鼠标经过的点，根据该算法可知要绘制二次贝塞尔曲线起码需要3个点以上，因此我们只有在points中的点数大于3时才开始绘制。接下来的处理就跟该算法一毛一样了，这里不再赘述。

代码更新后我们的曲线也变得平滑了许多，如下图所示：

本文到这里就结束了，希望大家在canvas画板中“画”得愉快~我们下次再见：）

感兴趣的童鞋可戳这里关注我的博客，任何新鲜好玩的博文将会第一时间分享到这儿哦~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

分享到：

相关信息

canvas贪食蛇 canvas实现贪食蛇的实践
bootstrapv4轮播图去除两侧阴影及线框的方法 bootstrapv4轮播图
前端Html5如何实现分享截图的示例代码

热门系统总排行

装机必备

系统教程栏目

系统帮助 win12教程 监控安装 祥瑞电脑 重装大师 重装教程 bios 其它教程 软件教程 苹果MAC教程 Linux教程 Win2003教程 Win2008教程 U盘教程 WinXP教程 Win7教程 Win8教程 Win10教程 win11教程 打印机

栏目热门教程

人气教程排行

站长推荐

热门系统下载

软件发布| Tag标签| 版权声明| 网站地图| 软件专题| sitemap| 系统城一键重装系统QQ群

本站发布的系统与软件仅为个人学习测试使用，请在下载后24小时内删除，不得用于任何商业用途，否则后果自负，请支持购买微软正版软件！如侵犯到您的权益,请及时通知我们,我们会及时处理。

皖ICP备11004271号-6版权所有：固镇县祥瑞电脑科技销售部