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 相关文章推荐
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 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
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
vue实现点击展开点击收起效果
2018/04/27 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
实习生个人找工作的自我评价
2013/10/30 职场文书
母校寄语大全
2014/04/10 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
教师业务学习材料
2014/12/16 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python