LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
canvas{border:1px solid grey;}
JS
// var Graphic = React.createClass({ 
class Graphic extends React.Component {
  
  constructor(props) {
    super(props);
  }
  
  componentDidMount() {
    let ctx = (ReactDOM)
      .findDOMNode(this)  //canvas
      .getContext('2d');
    this.paint(ctx);
  }

  componentDidUpdate() {
    let canvas = ReactDOM.findDOMNode(this);
    let context = canvas.getContext('2d');
    context.clearRect(0, 0, 200, 200);
    this.paint(context);
  }

  paint(context) {
    context.save();
    context.translate(100, 100);
    context.rotate(this.props.rotation, 100, 100);
    context.fillStyle = '#F00';
    context.fillRect(-50, -50, 100, 100);
    context.restore();
  }

  render() {
    return ;
  }
}
// });





var App = React.createClass({

  getInitialState: function() {
    return { rotation: 0 };
  },

  componentDidMount: function() {
    requestAnimationFrame(this.tick);
  },

  tick: function() {
    this.setState({ rotation: this.state.rotation + .01 });
    requestAnimationFrame(this.tick);
  },

  render: function() {
    return 
} }); ReactDOM.render(, document.body); //MDN requestAnimationFrame var start = null; var element = document.getElementById("SomeElementYouWantToAnimate"); element.style.position = 'absolute'; function step(t) { if (!start) start = t; var maxt=2000 // length of animation var dx=1000 // change of animation var dt = (t - start)/maxt; //fraction < 1 element.style.left = Math.min(dt*dx, 200) + "px"; if (dt < 1) window.requestAnimationFrame(step); } window.requestAnimationFrame(step);
Term
Sat, 01/13/2018 - 07:26

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv