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

這個網誌中的熱門文章

Unions 在C語言的簡單介紹

解釋scope.$apply用來做什麼? -- AngularJS

JavaScript的Timer用法