在html5中怎么使用canvas畫板實(shí)現(xiàn)平滑曲線

發(fā)布時(shí)間：2022-02-22 14:31:10 來源：億速云閱讀：199 作者：小新欄目：開發(fā)技術(shù)

這篇文章主要介紹了在html5中怎么使用canvas畫板實(shí)現(xiàn)平滑曲線，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

功能需求

項(xiàng)目需求：需要實(shí)現(xiàn)一個(gè)可以自由書寫的小畫板

簡(jiǎn)單實(shí)現(xiàn)

對(duì)于熟悉canvas的同學(xué)來說，這個(gè)需求很簡(jiǎn)單，大致邏輯如下：

1）監(jiān)聽事件pointerdown，pointermove，pointerup

2）標(biāo)記是否拖拽畫線模式變量 isDrawing，在down事件時(shí)置為true，up的時(shí)候置為false

3）使用canvas的api，設(shè)置線條樣式，調(diào)用繪制線條接口lineTo方法

短短幾十行代碼就能實(shí)現(xiàn)：

<!doctype html>
<html>

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

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

<body >
    <canvas id="c" width="1920" height="1080"></canvas>
    <script>
        var el = document.getElementById('c');
        var ctx = el.getContext('2d');
        //設(shè)置繪制線條樣式
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 1;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        var isDrawing;//標(biāo)記是否要繪制
        //存儲(chǔ)坐標(biāo)點(diǎn)
        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>

實(shí)現(xiàn)效果如下圖：

在html5中怎么使用canvas畫板實(shí)現(xiàn)平滑曲線

以上就簡(jiǎn)單的實(shí)現(xiàn)了畫板功能，如果要求不高的用戶可以使用，但一旦遇到有點(diǎn)要求的用戶就無法交付這種產(chǎn)品，仔細(xì)看是線條折線感太強(qiáng)。

為什么會(huì)有折線感呢？

主要原因：

我們調(diào)用的api方法lineTo是兩點(diǎn)連線也就是直線

瀏覽器對(duì)鼠標(biāo)事件mousemove的采集是有采集頻率的，并不是每個(gè)鼠標(biāo)移動(dòng)經(jīng)過的每一個(gè)像素點(diǎn)都會(huì)觸發(fā)事件。

當(dāng)鼠標(biāo)移動(dòng)的越快，那么兩點(diǎn)之間的間隔就越遠(yuǎn)，那么折線感就更明顯。

在html5中怎么使用canvas畫板實(shí)現(xiàn)平滑曲線

如何能繪制平滑的曲線？

canvas提供的api中是有現(xiàn)成接口的，貝塞爾系列的接口就能滿足我們的要求，接下來我們講一下使用二次貝塞爾曲線繪制平滑曲線。

quadraticCurveTo(cpx,cpy,x,y)

二次貝塞爾曲線接口需要四個(gè)參數(shù)，cpx，cpy是曲線的控制點(diǎn)，x，y是曲線終點(diǎn)。

有人問那曲線的起點(diǎn)在哪里？其實(shí)曲線的起點(diǎn)取決于上一操作狀態(tài)，可以是moveTo的位置，或者是lineTo的位置，或者是貝塞爾的終點(diǎn)。

那么怎么調(diào)用quadraticCurveTo，參數(shù)怎么傳呢？

我們需要找出關(guān)鍵位置，直接用例子告訴大家吧

1）假如我們用鼠標(biāo)采集到ABCDEF六個(gè)點(diǎn)

2）取前面三個(gè)點(diǎn)ABC計(jì)算，BC的中點(diǎn)B1，以A為起點(diǎn)，B為控制點(diǎn)，B1為終點(diǎn)，那么利用quadraticCurveTo可以繪制出這樣一條貝塞爾曲線

在html5中怎么使用canvas畫板實(shí)現(xiàn)平滑曲線

3）接下來計(jì)算CD的中點(diǎn)C1，以B1為起點(diǎn)，C為控制點(diǎn)，C1為終點(diǎn)，那么利用quadraticCurveTo可以繪制出這樣一條貝塞爾曲線

在html5中怎么使用canvas畫板實(shí)現(xiàn)平滑曲線

4）以此類推，當(dāng)?shù)搅俗詈笠粋€(gè)點(diǎn)時(shí)以D1為起點(diǎn)，E為控制點(diǎn)，F(xiàn)為終點(diǎn)，結(jié)束貝塞爾繪制。

在html5中怎么使用canvas畫板實(shí)現(xiàn)平滑曲線

根據(jù)算法進(jìn)行代碼改造

OK我們介紹了具體算法的影響，那用該算法對(duì)我們前面的代碼進(jìn)行改造：

<!doctype html>
<html>

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

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

<body >
    <canvas id="c" width="1920" height="1080"></canvas>
    <script>
        var el = document.getElementById('c');
        var ctx = el.getContext('2d');
        //設(shè)置繪制線條樣式
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 1;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        var isDrawing;//標(biāo)記是否要繪制
        //存儲(chǔ)坐標(biāo)點(diǎn)
        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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“在html5中怎么使用canvas畫板實(shí)現(xiàn)平滑曲線”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

在html5中怎么使用canvas畫板實(shí)現(xiàn)平滑曲線

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽