canvas小画板之平滑曲线的实现


Posted in HTML / CSS onAugust 12, 2020

功能需求

项目需求:需要实现一个可以自由书写的小画板

简单实现

对于熟悉canvas的同学来说,这个需求很简单,大致逻辑如下:

1)监听事件pointerdown,pointermove,pointerup

2)标记是否拖拽画线模式变量 isDrawing,在down事件时置为true,up的时候置为false

3)使用canvas的api,设置线条样式,调用绘制线条接口lineTo方法

短短几十行代码就能实现:

<!doctype html>
<html>

<head>
    <meta charset=utf-8>
    <style>
        canvas {
            border: 1px solid #ccc
        }

        body {
            margin: 0;
        }
    </style>
</head>

<body style="overflow: hidden;background-color: rgb(250, 250, 250);touch-action: none;">
    <canvas id="c" width="1920" height="1080"></canvas>
    <script>
        var el = document.getElementById('c');
        var ctx = el.getContext('2d');
        //设置绘制线条样式
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 1;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        var isDrawing;//标记是否要绘制
        //存储坐标点
        let lastX, lastY;
        document.body.onpointerdown = function (e) {
            console.log('pointerdown');
            isDrawing = true;
            lastX = e.clientX;
            lastY = e.clientY;
        };
        document.body.onpointermove = function (e) {
            console.log('pointermove');
            if (isDrawing) {
                draw(e.clientX, e.clientY, lastX, lastY);
            }
            lastX = e.clientX, lastY = e.clientY;
        };
        document.body.onpointerup = function (e) {
            if (isDrawing) {
                draw(e.clientX, e.clientY, lastX, lastY);
            }
            lastX = e.clientX, lastY = e.clientY;
            isDrawing = false;
        };

        function draw(x, y, lastX, lastY) {
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(x, y);
            ctx.stroke();
        }
    </script>
</body>
</html>

实现效果如下图:

canvas小画板之平滑曲线的实现

以上就简单的实现了画板功能,如果要求不高的用户可以使用,但一旦遇到有点要求的用户就无法交付这种产品,仔细看是线条折线感太强。

为什么会有折线感呢?

主要原因:

我们调用的api方法lineTo是两点连线也就是直线

浏览器对鼠标事件mousemove的采集是有采集频率的,并不是每个鼠标移动经过的每一个像素点都会触发事件。

当鼠标移动的越快,那么两点之间的间隔就越远,那么折线感就更明显。

canvas小画板之平滑曲线的实现

如何能绘制平滑的曲线?

canvas提供的api中是有现成接口的,贝塞尔系列的接口就能满足我们的要求,接下来我们讲一下使用二次贝塞尔曲线绘制平滑曲线。

quadraticCurveTo(cpx,cpy,x,y)

二次贝塞尔曲线接口需要四个参数,cpx,cpy是曲线的控制点,x,y是曲线终点。

有人问那曲线的起点在哪里?其实曲线的起点取决于上一操作状态,可以是moveTo的位置,或者是lineTo的位置,或者是贝塞尔的终点。

那么怎么调用quadraticCurveTo,参数怎么传呢?

我们需要找出关键位置,直接用例子告诉大家吧

1)假如我们用鼠标采集到ABCDEF六个点

2)取前面三个点ABC计算,BC的中点B1,以A为起点,B为控制点,B1为终点,那么利用quadraticCurveTo可以绘制出这样一条贝塞尔曲线

canvas小画板之平滑曲线的实现

3)接下来计算CD的中点C1,以B1为起点,C为控制点,C1为终点,那么利用quadraticCurveTo可以绘制出这样一条贝塞尔曲线

canvas小画板之平滑曲线的实现

4)以此类推,当到了最后一个点时以D1为起点,E为控制点,F为终点,结束贝塞尔绘制。

canvas小画板之平滑曲线的实现

根据算法进行代码改造

OK我们介绍了具体算法的影响,那用该算法对我们前面的代码进行改造:

<!doctype html>
<html>

<head>
    <meta charset=utf-8>
    <style>
        canvas {
            border: 1px solid #ccc
        }

        body {
            margin: 0;
        }
    </style>
</head>

<body style="overflow: hidden;background-color: rgb(250, 250, 250);touch-action: none;">
    <canvas id="c" width="1920" height="1080"></canvas>
    <script>
        var el = document.getElementById('c');
        var ctx = el.getContext('2d');
        //设置绘制线条样式
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 1;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        var isDrawing;//标记是否要绘制
        //存储坐标点
        let points = [];
        document.body.onpointerdown = function (e) {
            console.log('pointerdown');
            isDrawing = true;
            points.push({ x: e.clientX, y: e.clientY });
        };
        document.body.onpointermove = function (e) {
            console.log('pointermove');
            if (isDrawing) {
                draw(e.clientX, e.clientY);
            }

        };
        document.body.onpointerup = function (e) {
            if (isDrawing) {
                draw(e.clientX, e.clientY);
            }
            points = [];
            isDrawing = false;
        };

        function draw(mousex, mousey) {
            points.push({ x: mousex, y: mousey });
            ctx.beginPath();
            let x = (points[points.length - 2].x + points[points.length - 1].x) / 2,
                y = (points[points.length - 2].y + points[points.length - 1].y) / 2;
            if (points.length == 2) {
                ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y);
                ctx.lineTo(x, y);
            } else {
                let lastX = (points[points.length - 3].x + points[points.length - 2].x) / 2,
                    lastY = (points[points.length - 3].y + points[points.length - 2].y) / 2;
                ctx.moveTo(lastX, lastY);
                ctx.quadraticCurveTo(points[points.length - 2].x, points[points.length - 2].y, x, y);
            }
            ctx.stroke();
            points.slice(0, 1);

        }
    </script>
</body>

</html>

在原有基础上我们用了一个数组points保存鼠标经过的点,根据算法可知绘制贝塞尔曲线至少要用三个点,绘制过程中维护points数组。

实现效果如下,可见平滑了很多!

canvas小画板之平滑曲线的实现

后续文章:

实现蜡笔效果,实现笔锋效果,画笔性能优化

到此这篇关于canvas小画板之平滑曲线的实现的文章就介绍到这了,更多相关canvas平滑曲线内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 #HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 #HTML / CSS
在html页面中取得session中的值的方法
Aug 11 #HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 #HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 #HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 #HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 #HTML / CSS
You might like
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
php实现快速排序法函数代码
2012/08/27 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
图片完美缩放
2006/09/07 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
javascript常用的设计模式
2017/02/09 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
Python中apply函数的用法实例教程
2014/07/31 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
python实现随机梯度下降法
2020/03/24 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
PHP经典面试题
2016/09/03 面试题
《长城》教学反思
2014/02/14 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
2014年调度员工作总结
2014/11/19 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL