Sự kiện liên kết để định hình trên canvas

Làm cách nào để liên kết sự kiện với hình dạng được vẽ trên canvas? Tôi cho rằng điều này sẽ hoạt động nhưng tôi gặp lỗi.Sự kiện liên kết để định hình trên canvas

<html> 
    <head> 
    <script type="application/javascript"> 
    function draw() { 
     var canvas = document.getElementById("canvas"); 
     var ctx = canvas.getContext("2d");  
     ctx.fillStyle = "rgb(200,0,0)"; 
     var rec = ctx.fillRect (0, 0, 55, 50); 

     rec.onclick = function(){ 
      alert('something'); 
     } 
    } 
    </script> 
    </head> 
    <body onLoad="draw()"> 
     <canvas id="canvas" width="300" height="300"></canvas> 
    </body> 
</html>

Nguồn

2010-05-09 Ben Shelock

Check-out [Fabric.js] (http://fabricjs.com) thư viện canvas. – kangax

Đặt trình xử lý sự kiện trên phần tử canvas và sau đó sử dụng vị trí chuột để quyết định phần khái niệm của canvas sự kiện đang diễn ra.

Tôi chưa từng chơi với canvas nhiều lắm, nhưng tôi sẽ không ngạc nhiên nếu có một số thư viện giúp bạn quản lý sự kiện ủy nhiệm cho các yếu tố tưởng tượng như vậy.

Nguồn

2010-05-09 16:50:43 goat

Có vẻ như bạn nên sử dụng svg thay vì nó cho phép bạn thêm trình xử lý sự kiện vào hình dạng. Tôi khuyên bạn nên kiểm tra raphaeljs.com để bắt đầu.

Nguồn

2010-05-10 08:00:56

Sử dụng Kineticsjs, bạn có thể xử lý các sự kiện hình thành trong một khung như sau:

<script> 
    shape.on('mousedown mouseover' function(evt) { 
    // do something 
    }); 
</script>

Nguồn

2012-09-29 08:54:20 Pith

Sự kiện liên kết để định hình trên canvas

Trả lời

Các vấn đề liên quan