Cax小程序、小游戏和Web通用画布渲染引擎Github→https://github.com/dntzhang/cax点我看DEMO小程序DEMO正在审核中，敬请期待。小游戏DEMO正在审核中。请期待。特性LearnOnce,WriteAnywhere(MiniPrograms,MiniGames,PCWeb,MobileWeb)支持小程序，小游戏和Web浏览器渲染小程序，小游戏和Web有同样简单轻量级的API高性能渲染架构Ultra-轻量级代码大小松耦合渲染架构支持Canvas元素管理支持Canvas元素事件系统图灵完备的组嵌套系统内置补间动画功能内置文本、位图、序列帧、绘图对象和各种矢量绘图对象一分钟入门迷你程序cax使用一分钟入门小游戏cax使用一分钟入门Webcax使用内置对象GroupBitmapSpriteTextGraphicsShapeRectCircelEllipseElementButtonPropertyTransformAlphaCompositeOperationCursorEvent小程序EventWebEvent自定义对象自定义Shape，自定义ElementLicense，小程序cax一分钟上手，使用github下载cax自定义组件，然后将cax自定义组件导入小程序：└──cax├──cax.js├──cax.json├──cax.wxml├──cax.wxss└──index.js在页面或组件中声明依赖：{"usingComponents":{"cax":"../cax/cax"}}在wxml中引入cax标签：渲染逻辑injs:importcaxfrom'../cax/index'Page({onLoad:function(){//传递这个比在web中使用cax多，这个用于Page或Component实例conststage=newcax.Stage(200,200,'myCanvas',this)constrect=newcax.Rect(100,100,{fillStyle:'black'})rect.originX=50rect.originY=50rect.x=100rect.y=100rect.rotation=30rect.on('tap',()=>{console.log('tap')})stage.add(rect)stage.update()}})效果如下：除了点击事件，还可以给rect绑定其他触摸事件：rect.on('touchstart',()=>{console.log('touchstart')})rect.on('touchmove',()=>{console.log('touchmove')})rect.on('touchend',()=>{console.log('touchend')})一分钟介绍GitHub上使用的gamecax下载cax小游戏示例，目录结构如下：conststage=newcax.Stage()不同于小程序和Web，小游戏不需要传递任何参数给创建一个舞台一分钟上手Webcax使用npm或CDN：npmicaxhttps://unpkg.com/cax@latest/dist/cax.min.jshttps://unpkg.com/cax@latest/dist/cax.jsimportcaxfrom'cax'conststage=newcax.Stage(200,200,'#renderTo')constrect=newcax.Rect(100,100,{fillStyle:'black'})stage.add(rect)stage.update()除了stage构造函数和小程序的第四个参数this外，其他使用方法相同。内置对象Group用于分组。组也可以嵌套组。父容器的属性将叠加在子属性上。例如：组的x为100，组内位图的x为200，最后将位图渲染到舞台上的x300组的alpha为0.7，组内位图的alpha为0.6，最后在舞台上渲染的位图的alpha为0.42constgroup=newcax.Group()constrect=newcax.Rect(100,100{fillStyle:'black'})group.add(rect)stage.add(group)stage.update()group有常用的add和remove方法来增删元素。先添加的先绘制，后添加的全部叠加在先添加的上。Bitmapconstbitmap=newcax.Bitmap(img)stage.add(bitmap)stage.update()如果你只传递url而不是Image对象的实例，你需要这个：constbitmap=newcax.Bitmap('./wepay.png',()=>{stage.update()})stage.add(bitmap)这里需要注意的是小程序需要配置downloadFile，需要配置一个合法的域名正常加载图像。可以设置图像裁剪显示区域，以及其他变换属性：bitmap.rect=[0,0,170,140]bitmap.x=200Sprite序列帧动画组件，可以将任意图像的任意区域组合成一个系列的动画。constsprite=newcax.Sprite({framerate:7,imgs:['./mario-sheet.png'],frames:[//x,y,width,height,originX,originY,imageIndex[0,0,32,32],[32*1,0,32,32],[32*2,0,32,32],[32*3,0,32,32],[32*4,0,32,32],[32*5,0,32,32],[32*6,0,32,32],[32*7,0,32,32],[32*8,0,32,32],[32*9,0,32,32],[32*10,0,32,32],[32*11,0,32,32],[32*12,0,32,32],[32*13,0,32,32],[32*14,0,32,32]],动画：{walk:{frames:[0,1]},happy:{frames:[5,6,7,8,9]},win:{frames:[12]}},playOnce:false,currentAnimation:"walk",animationEnd:function(){}});Text文本对象consttext=newcax.Text('HelloWorld',{font:'20pxArial',color:'#ff7700',baseline:'top'})Graphics绘图对象用于使用chain的基本Canvas命令绘制图形constgraphics=newcax.Graphics()graphics.beginPath().arc(0,0,10,0,Math.PI*2).closePath().fillStyle('#f4862c').fill().strokeStyle('black').stroke()graphics.x=100graphics.y=200stage.add(graphics)Shape与Graphics的不同之处在于Shape通常有限制宽度和高度，因此可以使用离屏Canvas进行缓存。下面这些属于Shape。Rectconstrect=newcax.Rect(200,100,{fillStyle:'black'})Circelconstcircle=newcax.Circel(10)Ellipseconstellipse=newcax.Ellipse(10)注意：技术上的小游戏和Web可以关闭-screenCanvas，小程序不能，因为小程序不支持动态创建离屏Canvas。ElementElement是各种元素的组合，比如图片混合了Bitmap、Group、Text、Shape等Buttonconstbutton=newcax.Button({width:100,height:40,text:"ClickMe!"})属性Transform属性名描述x水平偏移y垂直偏移scaleX水平缩放scaleY垂直缩放旋转rotationskewXSkewXskewYSkewYoriginX旋转基点XoriginY旋转基点YAlpha属性名描述alpha元素的透明度注意parent和child都设置了alpha，并进行乘法叠加。compositeOperation属性名称描述了在目标图像上绘制的compositeOperation源图像的叠加方式。注意，如果没有定义compositeOperation，它会向上查找，找到最近的定义了compositeOperation的父容器作为自己的compositeOperation。Cursor属性名描述了鼠标向上移动的形状事件??。Applet事件事件名称描述tap手指触摸并立即离开touchstart手指触摸动作开始touchmove手指触摸在touchend手指触摸动作结束后移动dragdragweb事件事件名称描述click元素发生mousedown当鼠标按钮在元素上按下时触发mousemove当鼠标指针移到元素上mouseup当鼠标按钮在元素上松开时触发mouseover当鼠标指针移到元素上时触发mouseout当鼠标指针移出元素时触发tap手指触摸并立即离开touchstart手指触摸actionstarttouchmovefingertouchmovetouchendfingertouchactionenddragdragcustomobjectcustomShapecustomShapeInheritedfromcax.Shape:classSectorextendscax.Shape{constructor(r,from,to,option){super()this.option=选项||{}this.r=rthis.from=fromthis.to=to}draw(){this.beginPath().moveTo(0,0).arc(0,0,this.r,this.from,this.to).closePath().fillStyle(this.option.fillStyle).fill().strokeStyle(this.option.strokeStyle).lineWidth(this.option.lineWidth).stroke()}}使用Shape:constsector=newSector(10,0,Math.PI/6,{fillStyle:'red'lineWidth:2})stage.add(sector)stage.update()CustomElementCustomElement继承自cax.Group:classButtonextendscax.Group{构造函数（选项）{super()this.width=option.widththis.roundedRect=newcax.RoundedRect(option.width,option.height,option.r)this.text=newcax.Text(option.text,{font:option.font,color:option.color})this.text.x=option.width/2-this.text.getWidth()/2*this.text.scaleXthis.text.y=option.height/2-10+5*this.text.scaleYthis.add(this.roundedRect,this.text)}}导出默认按钮使用：constbutton=newcax.Button({width:100,height:40,text:"ClickMe!"})一般情况下，稍微复杂的组合建议继承Group，有利于自身内部组件的扩展和管理。可以看到小游戏demo中的Player、Bullet、Enemy、Background都是继承自Group。许可证麻省理工学院
