React Canvas: High performance rendering React Group

React Canvas provides the ability to render a mobile Web APP interface using canvas instead of traditional DOM rendering, with a much closer experience with the Native app. React Canvas provides a standard set of React components that are abstracted from rendering elements based on them.

GitHub Source Download

　

Example code:

var React = require (' React '); var Reactcanvas = require (' React-canvas '); var Surface = Reactcanvas.surface;var Image = React Canvas.image;var Text = Reactcanvas.text;var MyComponent = React.createclass ({render:function () {var surfaceWidth    = Window.innerwidth;    var surfaceheight = window.innerheight;    var imagestyle = This.getimagestyle ();    var textStyle = This.gettextstyle (); Return (<surface width={surfacewidth} height={surfaceheight} left={0} top={0}> <image style={imageSt        YLE} src= ' ... '/> <text style={textstyle}> Here's some Text below an image.  </Text> </Surface>);  }, Getimageheight:function () {return math.round (WINDOW.INNERHEIGHT/2); }, Getimagestyle:function () {return {top:0, left:0, Width:window.innerWidth, HEIGHT:THIS.G  Etimageheight ()}; }, Gettextstyle:function () {return {top:this.getImageHeight () + Ten, left:0, Width: Window.innerwidth, Height:20, lineheight:20, fontsize:12}; }});

　　

Related articles that may be of interest to you

• The JQuery effect "attached source" is very useful in website development
• Share 35 amazing CSS3 animation effects Demo
• Stunning 8 x HTML5 & JavaScript Effects
• Web development in a very practical 10 effects "source Download"
• 12 Classic white-rich jQuery images Carousel Plugin

This article links: React Canvas: High Performance rendering React components

Compilation Source: Dream Sky focus on front-end development technology sharing web design resources

React Canvas: High performance rendering React Group