canvas开发进阶

  • • 发表于 11个月前
  • • 作者 丁小柒
  • • 320 次浏览
  • • 3 条评论
  • • 最后编辑时间 11个月前
  • • 来自 [技术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

也不知道算是不算进阶。。。姑且放标题来吸引眼球吧
玩过canvas的都知道canvas的事件处理仅仅依存canvas,对内部的东西则不存在事件处理,那么我们该怎么办呢。。。。。。呢
微信小程序也支持canvas,好多人都想用canvas来做点东西,可是搞了半天除了图表就是图表,要么就是画板之类的东西,那么如何来对canvas内部的小东西来绑定事件监听呢

接下来是一串代码

    window.onload=function(){
        var canva=document.getElementById('canva');
        var ctx  =canva.getContext("2d");
        var h=canva.height;
        var w=canva.width;
        var rext={                            //随机坐标
            x:Math.random()*(w-50),
            y:Math.random()*(h-50),
        };
        (function Rect(){                       //画一个矩形,当然圆也可以
            ctx.fillStyle='whitesmoke';
            ctx.fillRect(rext.x,rext.y,50,50);
        })()    

------------


        接下来的可以自行封装起来留着以后用,我只是举个李子
        canva.addEventListener('mousemove',function(ev){   //鼠标滑过的处理
            var ev=ev||event;
            var x=ev.clientX;            
            var y=ev.clientY;                     
            //获取鼠标的信息,或者手指的动作信息也可以
            if(x>=rext.x && x<=rext.x+50 && y>=rext.y && y<=rext.y+50  )
            {        
                        console.log('选中');            //此处可进行具体的动作处理
                }
            })        
    }

该代码扣自我正在开发的插件中(默默的装了一波逼),也许你会问为什么不写小程序版本的呢,又关这个问题嘛。。。。。。。。。。。。。。我还不会小程序呢,hhhhh
水了那么多,其实我是来挣积分的,有关移植到小程序的问题,谁有空可以来试一下.鄙人因为临近期末的缘故,所以要开始看书了
有关小程序的canvas开发,我之前有写过两篇话题,canvas新手可以去参考着那两章来尝试这一节的内容.不懂的欢迎提问.
此处打个广告—-诚邀canvas开发的各位大大,有兴趣的可以参与我的canvas插件的制作

楼下欢迎打赏点赞扔硬币

分享到:
评论区(共3条评论)
3条评论
Ctrl+Enter
作者

丁小柒

丁小柒

APP:0 帖子:24 回复:26 积分:1061

已加入社区[384]天

长剑非是封木鞘,挥手再斩万鬼雄

作者详情》
精品推荐课程更多
扫码入群
Top