canvas教程

CreateJs入门必知必会(2)

字号+ 作者:H5之家 来源:H5之家 2017-06-06 18:03 我要评论( )

CreateJs事件使用也很方便,像jq一样的事件绑定和移除方式:on和off //注意点://用到mouseOver事件的时候需要加一句stage.enableMouseOver(10);//要让移动端支持createjs的点击等鼠标事件时需要加上createjs.Touch

CreateJs事件使用也很方便,像jq一样的事件绑定和移除方式:on和off

//注意点: //用到mouseOver事件的时候需要加一句 stage.enableMouseOver(10); //要让移动端支持createjs的点击等鼠标事件时需要加上 createjs.Touch.enable(stage); //移除事件需要特殊注意一下,移除的时候,参数不是事件函数,而是监听事件的返回值。可以放在对象的一个自定义属性上面。方便。 rect.handleClick = rect.on('click',() => { console.log('点击事件'); }); rect.off('click',rect.handleClick); 高亮效果 //在CreateJs里面透明的地方是不响应事件的,这样就实现了事件委托。比如做一个高亮效果,直接给容器加一个事件。 let container = new createjs.Container().set({ x:100, y:100 }); for (let i = 0; i < 4; i++) { let rect = new createjs.Shape().set({ x:100 * i, y:100 * i }); rect.fillCommand = rect.graphics.beginFill("red").command; rect.graphics.rect(0, 0, 100, 100); container.addChild(rect); } stage.addChild(container); stage.enableMouseOver(10); container.on('mouseover',(e) => { e.target.fillCommand.style = 'blue'; }); container.on('mouseout',(e) => { e.target.fillCommand.style = 'red'; })

效果如图:

CreateJs入门必知必会

最后要说的

最后附上几个我之前做的demo。代码略渣。

剩下的就去查API吧,如果还是有些不太明白的,就看代码,看别人写的或者从官方Github上面下载的压缩包里面有demo,看看用法,结合API来学。
真羡慕你们能看到我写的教程,虽然说不是很详细,但是我觉得基本思路应该解释清楚了。想当年,我自己学这个库的时候,真是一个人瞎琢磨,花了好些时间才会用了,要是不点赞(喜欢),好意思吗。

a'ゞ『完美』版权所有丨如未注明 , 均为原创丨本网站采用)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • canvas addEventListener简单例子

    canvas addEventListener简单例子

    2017-06-07 08:00

  • HTML5 Canvas火焰闪烁动画 火焰跟随鼠标

    HTML5 Canvas火焰闪烁动画 火焰跟随鼠标

    2017-06-06 13:04

  • 使用toBlob()方法将canvas对象转换为Blob对象

    使用toBlob()方法将canvas对象转换为Blob对象

    2017-06-06 13:04

  • JavaScript学习小结之使用canvas画“哆啦A梦”时钟

    JavaScript学习小结之使用canvas画“哆啦A梦”时钟

    2017-06-04 17:03

网友点评
-