canvas 中的元素拖拽

实验室要求实现在canvas的元素的拖拽,即在canvas放置一些图标,实现用户拖拽并连线。

需要的知识(1)canvas drawImage方法

                     function draw(){

                          var image= new Image();

                           var imageSrc = image.src("XXX.png");

                           var context =document.getelementById('#canvas').getContext('2d');

                            context.drawImage(imageSrc,x,y,width,height);

                      }

               (2)canvas lineTo()方法

                    function line(){

                      var context =document.getelementById('#canvas').getContext('2d');

                      context.moveTo(x1,y1);

                      context.lineTo(x2,y2); 

             }

               (3)随后找了很多资料都不知道如何在canvas中直接选中元素,然后直接套用jqueiry UI中的dragable方法,看来用鼠标定位canvas中的元素是唯一的方法。

然后由于自己的js不熟悉,所以需要继续研究。。。

转载于:https://www.cnblogs.com/qiyueshihuang/archive/2011/10/30/2229086.html

你可能感兴趣的:(canvas 中的元素拖拽)