如何使用html5和javascript在鼠標單擊事件上創建圖像

我是html5的新手，我想在點擊事件上創建一個點狀圖像。我嘗試使用上下文，但不幸的是沒有工作。我正在使用的代碼是如何使用html5和javascript在鼠標單擊事件上創建圖像

document.addEventListener("DOMContentLoaded", init, false); 

     function init() 
     { 
     var canvas = document.getElementById("options"); 
     canvas.addEventListener("mousedown", getPosition, false); 
     } 

     function getPosition(event) 
     { 
     var x = new Number(); 
     var y = new Number(); 
     var canvas = document.getElementById("options"); 

     if (event.x != undefined && event.y != undefined) 
     { 
      x = event.x; 
      y = event.y; 
     } 
     else // Firefox method to get the position 
     { 
      x = event.clientX + document.body.scrollLeft + 
       document.documentElement.scrollLeft; 
      y = event.clientY + document.body.scrollTop + 
       document.documentElement.scrollTop; 
     } 

     x -= canvas.offsetLeft; 
     y -= canvas.offsetTop; 

     alert("x: " + x + " y: " + y); 
      var b_canvas = document.getElementById("b"); 
    var b_context = b_canvas.getContext("2d"); 
    b_context.fillRect(50, 25, 150, 100);

請指出我在做什麼錯誤。給您的建議

來源

2012-06-27 sami

這是什麼與它交互的html看起來像？ – Vidur

我有一個圖像，我從XML獲取它。在這我必須應用鼠標點擊事件，並在那裏我點擊只是點像圖像應該出現。這是javascript代碼段，我正在使用獲取座標點擊 – sami

它看起來像所有的計算是完成畫布與ID '選項'，但上下文在id爲b的畫布上獲得。這是由設計嗎？進一步在代碼示例中，x和y從不用於填充。也許這是一個測試版本？ –

不知道如果是這樣的問題，而是要在畫布上繪製一個點，你就可以開始一個路徑，得出一個完全封閉的弧（從0弧度到2PI弧度）和填充：

 b_context.beginPath(); 
    b_context.arc(x, y, 5 , 0, 2 * Math.PI,true); 
    b_context.fillStyle = "blue"; 
    b_context.fill();

此外，重要的是直接在畫布上設置寬度和高度，而不是在CSS中設置以防止變形。（剛剛發現我自己;））完整的示例小提琴：http://jsfiddle.net/wHsMJ/（點擊右邊的矩形內測試）

來源

2012-06-27 13:00:17

Thanx。它的工作:) – sami

如何使用html5和javascript在鼠標單擊事件上創建圖像

回答

相關問題