在 HTML5 Canvas 貝茲曲線(上) 這篇文章中,很快的討論了 quadraticCurveTo() 方法的貝茲曲線描繪效果,現在加上捕捉滑鼠事件的程式碼,便能建立如下的動態圖形:
畫面中的紅色圓心是控制點,以滑鼠按住拖曳便能看到貝茲曲線的變化情形。來看看如完實作相關的功能,首先配置一個 Canvas 元素:
接下來撰寫以下的 JavaScript 。
其中監聽使用者按住紅色點的拖曳事件,於移動時不斷的重繪,動態更新貝曲線的控制點來執到視覺效果。
畫面中的紅色圓心是控制點,以滑鼠按住拖曳便能看到貝茲曲線的變化情形。來看看如完實作相關的功能,首先配置一個 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,陳俊甫 你好:補上程式碼囉,請參考 ;)
謝謝~~
張貼留言