多端JavaScriptCanvas框架streakjs

创建一个stage并绑定容器，设置width和高度varstage=newstreakjs.Stage({container:"container",width:640,height:480});创建图层varlayer=newstreakjs.Layer();创建图形对象并添加到图层varcircle=newstreakjs.shapes.Circle({x:stage.width/2,y:stage.height/2,radius:70,fill:"red",stroke:"black"});layer.add(circle);在stage上添加一层stage.add(layer);完整代码见https://guyoung.github.io/str...Node.jsstreakjs是在Node上使用的.js服务器，需要安装node-canvasnpminstallcanvasnode-canvas安装方法，详见https://github.com/Automattic...streakjs.adaptive.getGlobal().canvas=require("canvas");varstage=newstreakjs.Stage({width:400,height:400});varlayer=newstreakjs.Layer();varcircle=newstreakjs.shapes.Circle({x:stage.width/2,y:stage.height/2,radius:70,fill:"red",stroke:"black",strokeWidth:4});layer.add(circle);stage.add(layer);console.log(circle.toDataURL());微信小程序微信小程序使用了streakjs，详见https://github.com/guyoung/st...实际运行效果请扫码小程序Concept核心类的basestreakjs.NodeNodeNode类是场景、图层、图形、图形组等对象的基类，提供公共属性和方法streakjs.StagestageStage是一个容器对象，在streakjs中,Stage对象用作顶级容器。Stage对象可以添加多个层。streakjs.LayerLayerLayer是一个容器对象，将画布对象封装在里面。streakjs.Shape图形Shape类是所有图形对象的基类，可以通过继承Shape类或者创建Shape对象来自定义图形对象streakjs.Group图形组Group是一个容器对象，Group对象用于组合多个不同的Shapes对象，或者其他Group对象组合成一个复杂的图形进行统一管理。内置图形streakjs内置各种图形对象streakjs.shapes.Arc圆弧streakjs.shapes.Arrow箭头streakjs.shapes.Button按钮streakjs.shapes.Circle圆圈streakjs.shapes.Ellipse椭圆streakjs.shapes.Label标签streakjs.shapes.Linestrakejs.shapes.Path路径streakjs.shapes.Polygon多边形streakjs.shapes.Rect矩形streakjs.shapes.RegularPolygon正多边形streakjs.shapes.Ring环strakejs.shapes.Sector扇区streakjs.shapes.Star星形streakjs.shapes.Text文字streakjs.shapes.TextPath文本路径streakjs.shapes.Image图片streakjs.shapes.Sprite除了使用上面内置的图形对象外，还可以通过继承strakejsShape类或者在创建Shape时定义sceneFunc函数来自定义对象图形对象vartriangle=newstreakjs.Shape({sceneFunc:function(context,shape){context.beginPath();context.moveTo(20,50);context.lineTo(220,80);context.quadraticCurveTo(150,100,260,170);context.closePath();context.fillStrokeShape(shape);},填充:"#00D2FF",stroke:"black",strokeWidth:4});sreakjs对象中的基本属性都继承自Node，包括Stage、Layer、Shape、Group等，有如下属性：IDNameNamePositionPositionSizeLarge小比例缩放旋转旋转倾斜倾斜偏移偏移不透明度透明可见显示/隐藏varrect2=newstreakjs.shapes.Rect({x:(stage.width-100)/2,y:150,width:100,height:50,填充：“绿色”，描边：“黑色”，描边宽度：5，角半径：10，偏斜：30});stylesreakjs中的每个图形对象都支持以下样式属性：StrokeStrokeLinearGradientLinearGradientStrokeFillFillFillLinearGradientLinearGradientFillFillRadialGradientRadialGradientFillFillPatternImageFillShadowShadowLineJoinLineIntersectionInflectionPointLineCapLineEndPointLineDashDashedLinevarrect=newstreakjs.shapes.Rect({x:(stage.width-240)/2,y:100,width:240,height:80,fillPatternImage:res,fillPatternOffset:{x:-220,y:70}});dragstreakjs所有继承自Node类的对象都可以实现拖动功能，需要设置对象的draggable属性settruevarcircle=newstreakjs.shapes.Circle({x:stage.width/2,y:stage.height/2,radius:70,fill:"red",stroke:"black",strokeWidth:4,draggable:true});Events事件leakjs中继承自Node的所有对象都可以绑定事件绑定事件circle.on("mouseover",function(){writeMessage("MouseoverCircle");});circle.on("mouseout",funcmotion(){writeMessage("MouseoutCircle");});circle.on("mousedown",function(){writeMessage("MousedownCircle");});circle.on("mouseup",function(){writeMessage("MouseupCircle");});绑定多个事件rect.on("mouseovermouseoutmousedownmouseuptouchstarttouchend",function(evt){writeMessage("RectMultiEvents:"+evt.type);})Animationstreakjs中的Animation对象提供了基本的动画功能varperiod=2000;anim=newstreakjs.Animation(function(frame){varscale=Math.sin((frame.time*2*Math.PI)/period)+0.001;regularPolygon.scale={x:scale,y:比例};},图层);完整代码见https://guyoung.github.io/str...streakjs中的Tween对象提供了慢动作动画功能，可以实现图形从原始状态到新状态的线性变化，包括位置的变化，大小，旋转，缩放，倾斜，颜色，透明度等。PI*2，不透明度：1，描边宽度：6，scaleX：1.5});setTimeout(function(){tween.play();},5000);完整代码参见https://guyoung。github.io/str...SelectorstreakjsStage、Layer、Group等容器对象都有find和findOne方法，可以根据ID、Name和类名获取对象根据ID获取对象varshape=layer.find("#circle1")[0];根据Name获取对象varshape=layer.find(".circle2")[0];根据类名获取对象varshapes=layer.find("Circle");完整代码见https://guyoung.github.io/str...序列化、反序列化和导出将stage保存为JSON数据stage.toJSON();将JSON数据加载到舞台varjson='{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},“className":"Layer","children":[{"attrs":{"x":100,"y":100,"sides":6,"radius":70,"fill":"red","stroke":"black","strokeWidth":4},"className":"RegularPolygon"}]}]}';varstage=streakjs.Node.load(json,"container");可以直接导出为图片文件vardataURL=stage.toDataURL({pixelRatio:3});down??loadURI(dataURL,"stage.png");完整代码见https://guyoung.github.io/str...更多用法方法，请访问项目官网https://guyoung.github.io/str...项目官网https://github.com/guyoung/st...关注微信公众号获取最新软件动态