HTML5 canvas的事件

本文通过一个简单的示例介绍了如何使用 HTML5 的 Canvas API 来处理鼠标事件,包括按下、移动和释放等基本操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML5 canvas的事件

<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.strokeStyle = "black";
context.fillStyle = "red";
context.rect(0, 0, 300, 400);
context.fill();

canvas.onmousedown = function() {
console.log("123");
}
canvas.onmouseup = function() {
console.log("456");
};
canvas.onmousemove = function() {
console.log("789");
}

canvas.onclick = function() {
console.log("999");
}
</script>

 

  1. onabortnull
  2. onbeforeunloadnull
  3. onblurnull
  4. oncanplaynull
  5. oncanplaythroughnull
  6. onchangenull
  7. onclicknull
  8. oncontextmenunull
  9. ondblclicknull
  10. ondeviceorientationnull
  11. ondragnull
  12. ondragendnull
  13. ondragenternull
  14. ondragleavenull
  15. ondragovernull
  16. ondragstartnull
  17. ondropnull
  18. ondurationchangenull
  19. onemptiednull
  20. onendednull
  21. onerrornull
  22. onfocusnull
  23. onhashchangenull
  24. oninputnull
  25. oninvalidnull
  26. onkeydownnull
  27. onkeypressnull
  28. onkeyupnull
  29. onloadnull
  30. onloadeddatanull
  31. onloadedmetadatanull
  32. onloadstartnull
  33. onmessagenull
  34. onmousedownnull
  35. onmousemovenull
  36. onmouseoutnull
  37. onmouseovernull
  38. onmouseupnull
  39. onmousewheelnull
  40. onofflinenull
  41. ononlinenull
  42. onpagehidenull
  43. onpageshownull
  44. onpausenull
  45. onplaynull
  46. onplayingnull
  47. onpopstatenull
  48. onprogressnull
  49. onratechangenull
  50. onresetnull
  51. onresizenull
  52. onscrollnull
  53. onsearchnull
  54. onseekednull
  55. onseekingnull
  56. onselectnull
  57. onstallednull
  58. onstoragenull
  59. onsubmitnull
  60. onsuspendnull
  61. ontimeupdatenull
  62. onunloadnull
  63. onvolumechangenull
  64. onwaitingnull
  65. onwebkitanimationendnull
  66. onwebkitanimationiterationnull
  67. onwebkitanimationstartnull
  68. onwebkittransitionendnull
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值