HTML5 Canvas 貝茲曲線（下）

在 HTML5 Canvas 貝茲曲線（上） 這篇文章中，很快的討論了 quadraticCurveTo() 方法的貝茲曲線描繪效果，現在加上捕捉滑鼠事件的程式碼，便能建立如下的動態圖形：





畫面中的紅色圓心是控制點，以滑鼠按住拖曳便能看到貝茲曲線的變化情形。來看看如完實作相關的功能，首先配置一個 Canvas 元素：

<canvas height="620" id="pcanvas"

style="background: black;" width="600">

</canvas>

接下來撰寫以下的 JavaScript 。

<script type="text/javascript">

    var d = false; var x1 = 10, y1 = 286, cx = 120, cy = 420, x2 = 560, y2 = 286;

    var canvas = document.getElementById('pcanvas');

    var context = canvas.getContext('2d'); drawCurve();

    function drawCurve() {

        context.clearRect(0, 0, canvas.width, canvas.height);

        context.strokeStyle = 'red'; context.beginPath();

        context.arc(cx, cy, 6, 0, Math.PI * 2, false);

        context.stroke(); context.closePath();

        context.beginPath();

        context.moveTo(cx, cy);

        context.lineTo(x2, y2);

        context.stroke();

        context.closePath();

        context.strokeStyle = '#eeeeee';

        context.beginPath();

        context.moveTo(x1, y1);

        context.quadraticCurveTo(cx, cy, x2, y2);

        context.stroke();

        context.closePath();

    };

    canvas.addEventListener('mousemove', function (e) {

        console.log(e.offsetX + ',' + e.offsetY);

        if (d) { cx = e.offsetX; cy = e.offsetY; drawCurve() }

    }, false);

    canvas.addEventListener('mousedown', function (e) {

        console.log(e.x + ',' + e.y);

        if (Math.abs(e.offsetX - cx) < 6 && Math.abs(e.offsetY - cy) < 6) {

            d = true; console.log(e.x + ';' + e.y);

        }

    }, false);

    canvas.addEventListener('mouseup', function (e) {

        d = false

    }, false);

</script>

其中監聽使用者按住紅色點的拖曳事件，於移動時不斷的重繪，動態更新貝曲線的控制點來執到視覺效果。