HTML5 Canvas使用貝玆曲線的範例

這邊我寫了一個簡單的Javascript搭配了HTML5的Canvas使用了貝玆曲線的範例，

但寫的有點亂，但是我簡單講解一下這個程式主要目的在做什麼。

我會在body的標籤中建立一個canvas id='b' 寬度為785,長度為180並且在canvas中畫了一條線，當我滑鼠按下左鍵沒有放開的時候，線會跟著滑鼠而彎曲反之放開之後就固定住。
對了我有用到JQuery的library，再測試這個Code的時候記的要加上去。

1. window.draw_line =
2. {
3.         canvas : null,
4.         context : null,
5.         mouse_hold : false
6. };
8. function TextInit(context){
9.         var my_gradient = context.createLinearGradient(0, 0, 0, 225);
10.         my_gradient.addColorStop(0, "white");
11.         context.fillStyle = my_gradient
12.         context.font = "bold 20px sans-serif";
13. };
15. $(document).ready(function() {
16.         draw_line.canvas = document.getElementById("b");
17.         draw_line.context = draw_line.canvas.getContext("2d");
18.         TextInit(draw_line.context);
20.         var controlX1 = 0;
21.         var controlY1 = 10;
22.         var controlX2 = 0;
23.         var controlY2 = 10;
24.         var endX = 785;
25.         var endY = 90;
26.    // drww line
27.         draw_line.context.beginPath();
28.         draw_line.context.moveTo(0, 90);
29.         draw_line.context.lineTo(785, 90);
30.         draw_line.context.lineWidth = 5;
31.         draw_line.context.strokeStyle = "#000";
32.         draw_line.context.stroke();
33.        
34.         $("#b").mousemove(function(e){
35.            if (draw_line.mouse_hold)
36.            {
37.                    var offset_left = $("#b").offset().left;
38.                    var offset_top  = $("#b").offset().top;
39.                    //javascript: console.log( , );
40.                    draw_line.context.clearRect(0 ,0, 785, 785);
41.                    //Draw mouse position on canvas
42.                    draw_line.context.beginPath();
43.                    draw_line.context.moveTo(0, 90);
44.                    draw_line.context.fillText((e.clientX- offset_left) +",", 0, 30);
45.                    draw_line.context.fillText((e.clientY - offset_top), 80, 30);
46.                    controlX1 = (e.clientX - offset_left)-10;
47.                    controlX2 = (e.clientX - offset_left)+10;
48.                    controlY1 = (e.clientY - offset_top);
49.                    controlY2 = (e.clientY - offset_top);
50.               draw_line.context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
51.               //Debug information
52.                    javascript: console.log( controlX1, controlX2);
53.                    javascript: console.log( controlY1, controlY2);
54.                   draw_line.context.stroke();
55.           }
56.     }).mousedown(function(){
57.       
58.         draw_line.mouse_hold = true;
59.     }).bind('mouseup mouseout',function(){
60.         draw_line.mouse_hold = false;
61.     });
62. });