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>

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

5 則留言:

陳俊甫 提到...

請問這是如何作出來的呢?怎麼讓紅線可以動態的移動?怎麼讓紅線可以改變白線的曲線~~謝縛

康廷數位 提到...

主要是透過以下的方法:

context.moveTo(x1, y1);
context.quadraticCurveTo(cx, cy, x2, y2);
context.stroke();

請參考上一篇 http://www.kangting.tw/2013/02/html5-canvas.html

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

陳俊甫 提到...

請問如何更新的,是否可以給我看程式碼的實現呢?因為我想要畫喜怒哀樂四個表情。用quadraticCurveTo曲線在canvas上按出三點後,然後可以動態的調整曲線。可是遇到一個問題,就是原本的曲線會留在canvas上,不知道怎麼消掉。麻煩指教,謝謝~~~~

康廷數位 提到...

Hi,陳俊甫 你好:補上程式碼囉,請參考 ;)

陳俊甫 提到...

謝謝~~