與按鈕的麻煩點擊畫布

-1

上我有一個畫布，使人們能夠畫線的這種在畫布上，試圖實現一個改變線條的顏色它們的繪製也是一個按鈕來清除畫布三個按鈕。首先代碼是我的HTML它初始化畫布，按鈕，然後調用javascript文件：與按鈕的麻煩點擊畫布

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Paint Canvas</title> 
    <style type="text/css"><!-- 
     #container { position: relative; } 
     #imageView { border: 3px solid #000; } 
    --></style> 
    </head> 
    <body> 
    <div id="container"> 
     <canvas id="imageView" width="600" height="300"> 

     </p> 

     </canvas> 
    </div> 

    <script type="text/javascript" 
      src=".js"> 
    </script> 

    <input type= "button" value= "Green" id= "green" onclick= "GreenRect()" /> 
    <input type= "button" value= "Red" id= "red" onclick= "RedRect()" /> 
    <input type= "button" value= "clear canvas" id= "clear" onclick= "ImgClr()" /> 

    <button id="howdy">Howdy!</button> 

    <br> 

    </body

下面是javascript代碼：

//Call Window onload 
if (window.addEventListener) { 
    window.addEventListener('load', function() { 
     var canvas, context, tool; 

     function init() { 
      // Find Canvas 
      canvas = document.getElementById('imageView') 
      if (!canvas) { 
       alert('Error: I cannot find the canvas element!'); 
       return; 
      } 

      if (!canvas.getContext) { 
       alert('Error: no canvas.getContext!'); 
       return; 
      } 

      context = canvas.getContext('2d'); 
      if (!context) { 
       alert('Error: failed to getContext!'); 
       return; 
      } 

      //Instance of drawing tool 
      tool = new tool_pencil(); 

      // Enables mousedown, mousemove, and mouseup event 
      canvas.addEventListener('mousedown', ev_canvas, false); 
      canvas.addEventListener('mousemove', ev_canvas, false); 
      canvas.addEventListener('mouseup', ev_canvas, false); 
     } 

     function howdy() { 
      alert("Howdy!"); 
     } 

     //drawing tool works like a simulated drawing 
     function tool_pencil() { 
      var tool = this; 
      this.started = false; 

      /* function event that initializes when mousedown and 
      starts drawing tool on mousedown*/ 
      this.mousedown = function(ev) { 
       context.beginPath(); 
       context.moveTo(ev._x, ev._y); 
       tool.started = true; 
      }; 

      // draws on function mousemoves and sets a specific color and width 
      // to line 

      this.mousemove = function(ev) { 
       if (tool.started) { 
        context.lineTo(ev._x, ev._y); 
        context.stroke(); 
        context.strokeStyle = '#FF4500'; 
        context.lineWidth = 8; 
        context.fillStyle = 'blue'; 
        context.fill(); 
       } 
      }; 

      // mouseup function, stops drawing 
      this.mouseup = function(ev) { 
       if (tool.started) { 
        tool.mousemove(ev); 
        tool.started = false; 
       } 
      }; 
     } 

     /* finds mouse position on canvas*/ 
     function ev_canvas(ev) { 
      if (ev.layerX || ev.layerX == 0) { 
       ev._x = ev.layerX; 
       ev._y = ev.layerY; 
      } else if (ev.offsetX || ev.offsetX == 0) { 
       ev._x = ev.offsetX; 
       ev._y = ev.offsetY; 
      } 

      var func = tool[ev.type]; 
      if (func) { 
       func(ev); 
      } 
     } 

     init(); 

    }, false); 

    function GreenRect() { 
     context.strokeStyle = 'green'; 
     context.stroke(); 
    } 

    function RedRect() { 
     context.strokeStyle = 'red'; 
     context.stroke(); 
    } 

    function ImgClr() { 
     context.clearRect(0, 0, 600, 300); 
    } 

}

來源

2012-07-31 LewSim

到底是什麼問題？你有沒有需要幫助的特定問題？ – Ivan 2012-07-31 17:09:47

畫布中的關閉「p」標記是什麼？ – Utkanos 2012-07-31 17:10:06

將顏色更改爲綠色和紅色的按鈕不起作用。我看到他們顯示在畫布下方，但他們不改變畫布上線的顏色像猜想，以及透明畫布也不工作。 – LewSim 2012-07-31 17:16:54

變量context不可達成GreenRect和RedRect功能範圍。儘量使其對js代碼第一行全球definig contex。

你也應該儘量多寫可讀的代碼 - 這將幫助你和其他人發現的缺陷。

您還沒有在script標籤有腳本名稱：

<script type="text/javascript" 
      src=".js"> 
</script>

，並有unnesessary p標籤在你canvas標籤：

<canvas id="imageView" width="600" height="300"> 

     </p> 

</canvas>

來源

2012-07-31 19:05:01

與按鈕的麻煩點擊畫布

回答

相關問題