keroro-king
diff --git a/‎examples/gradient/app.js‎
Lines changed: 46 additions & 0 deletions b/‎examples/gradient/app.js‎
Lines changed: 46 additions & 0 deletions
diff --git a/‎examples/gradient/index.html‎
Lines changed: 17 additions & 0 deletions b/‎examples/gradient/index.html‎
Lines changed: 17 additions & 0 deletions
diff --git a/‎lib/ReactCanvas.js‎
Lines changed: 1 addition & 0 deletions b/‎lib/ReactCanvas.js‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎webpack.config.js‎
Lines changed: 1 addition & 0 deletions b/‎webpack.config.js‎
Lines changed: 1 addition & 0 deletions
@@ -0,0 +1,46 @@
+/** @jsx React.DOM */
+
+'use strict';
+
+var React = require('react');
+var ReactCanvas = require('react-canvas');
+
+var Gradient = ReactCanvas.Gradient;
+var Surface = ReactCanvas.Surface;
+
+var App = React.createClass({
+
+ render: function () {
+ var size = this.getSize();
+ return (
+ <Surface top={0} left={0} width={size.width} height={size.height}>
+ <Gradient style={this.getGradientStyle()}
+ colorStops={this.getGradientColors()} />
+ </Surface>
+ );
+ },
+
+ getGradientStyle: function(){
+ var size = this.getSize();
+ return {
+ top: 0,
+ left: 0,
+ width: size.width,
+ height: size.height
+ };
+ },
+
+ getGradientColors: function(){
+ return [
+ { color: "transparent", position: 0 },
+ { color: "#000", position: 1 }
+ ];
+ },
+
+ getSize: function () {
+ return document.getElementById('main').getBoundingClientRect();
+ }
+
+});
+
+React.render(<App />, document.getElementById('main'));
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+ <title>ReactCanvas: ListView</title>
+ <link rel="stylesheet" type="text/css" href="/examples/common/examples.css">
+ <script src="/examples/common/touch-emulator.js"></script>
+ <script type="text/javascript">
+ TouchEmulator();
+ </script>
+</head>
+<body>
+ <div id="main"></div>
+ <script src="/build/gradient.js"></script>
+</body>
+</html>
@@ -8,6 +8,7 @@ var ReactCanvas = {
  Image: require('./Image'),
  Text: require('./Text'),
  ListView: require('./ListView'),
+ Gradient: require('./Gradient'),
 
  FontFace: require('./FontFace'),
  measureText: require('./measureText')
 
@@ -6,6 +6,7 @@ module.exports = {
  entry: {
  'listview': ['./examples/listview/app.js'],
  'timeline': ['./examples/timeline/app.js'],
+ 'gradient': ['./examples/gradient/app.js'],
  'css-layout': ['./examples/css-layout/app.js']
  },