canvas响应鼠标事件

最新推荐文章于 2024-08-13 12:49:55 发布

hb707934728

最新推荐文章于 2024-08-13 12:49:55 发布

阅读量1.2w

点赞数 1

分类专栏： Html5_学习笔记

本文链接：https://blog.csdn.net/hb707934728/article/details/68066359

版权

本文详细探讨了如何在HTML5的canvas元素上实现鼠标事件监听和响应，包括点击、移动和松开等操作，以及如何获取鼠标在canvas上的精确位置，以实现更丰富的交互效果。

摘要由CSDN通过智能技术生成

   <head>
     <title>Sprite sheets</title>

      <style> 
         body {
            background: #dddddd;
         }

         #canvas {
            position: absolute;
            left: 0px;
            top: 20px;
            margin: 20px;
            background: #ffffff;
            border: thin inset rgba(100,150,230,0.5);
            cursor: pointer;
         }

         #readout {
            margin-top: 10px;
            margin-left: 15px;
            color: blue;
         }
      </style>
   </head>

  <body>
    <div id='readout'></div>

    <canvas id='canvas' width='500' height='250'>
      Canvas not sup