createjs object.mousedown stagemousemove stagemouseup

飞驰的蜗牛牛

于 2021-12-29 15:07:36 发布

阅读量177

点赞数

分类专栏： HTML5 文章标签： javascript css webview

本文链接：https://blog.youkuaiyun.com/shuishou1000/article/details/122216393

版权

HTML5 专栏收录该内容

16 篇文章

订阅专栏

该博客演示了如何使用EaselJS库在HTML5 canvas上创建一个红色圆形，并实现鼠标按下时拖动圆形的功能。当鼠标按下圆形并移动时，圆形会跟随鼠标移动，松开鼠标时停止拖动。

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

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
      <script src="lib/easeljs-0.7.1.min.js" charset="utf-8"></script>
  </head>
  <body onload="init()">
  <canvas id="canvas" width="300" height="300"></canvas>
  </body>
<script type="text/javascript">
  var stage
  function init(){
    stage=new createjs.Stage("canvas")
    createjs.Ticker.addEventListener("tick",tickHandler)
    createjs.Ticker.setFPS(60) //帧频是设置在Ticker中的
    start()
  }
  function tickHandler(e){
    stage.update()
  }

  function start(){
    var circle=new createjs.Shape()
    circle.graphics.beginFill("#ff0000").drawCircle(0,0,50)//这里坐标必须为0
    circle.x=stage.canvas.width/2
    circle.y=stage.canvas.height/2
    stage.addChild(circle)

     circle.addEventListener("mousedown",function(e){
       stage.addEventListener('stagemousemove',function(e){
         circle.x=stage.mouseX
         circle.y=stage.mouseY
       });
       stage.addEventListener('stagemouseup',function(e){
         e.target.removeAllEventListeners
       })
     })
  }
</script>
</html>