试图在Ember、Starfield组件中使用HTML5和Javascript_Javascript_Html_Canvas_Ember.js

试图在Ember、Starfield组件中使用HTML5和Javascript

javascript html canvas ember.js

试图在Ember、Starfield组件中使用HTML5和Javascript,javascript,html,canvas,ember.js,Javascript,Html,Canvas,Ember.js,我制作了一个基本的starfield程序，它使用javascript加载到画布中我一直试图通过将画布放在页面上将其合并到一个ember站点中，但我不确定如何加载该程序。我已经尝试将代码包含到页面的路由器、控制器、从单独的文件加载代码等等。我不确定从这里到哪里。有什么建议吗我想我可以用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="styleshee

我制作了一个基本的starfield程序，它使用javascript加载到画布中

我一直试图通过将画布放在页面上将其合并到一个ember站点中，但我不确定如何加载该程序。我已经尝试将代码包含到页面的路由器、控制器、从单独的文件加载代码等等。我不确定从这里到哪里。有什么建议吗

我想我可以用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-1.1.2.js"></script>
  <script src="js/libs/ember-1.5.1.js"></script>
  <script src="js/app.js"></script>

  </script>
</head>
<body>

...

<script type="text/x-handlebars" id="starfield">
  <canvas id='c'></canvas>
</script>

</body>
</html>

对于应用程序文件。但是我应该把星域的代码放在哪里？

更新现在我知道你想做什么了，我想把它完全组件化

 App.StarFieldComponent = Em.Component.extend({
  tagName:'canvas',
  width: 400,
  height: 300,
  starCount:100,
  refresh:30,
  attributeBindings:['width', 'height'],
  stars:null,
  on:false,

  build: function(){
    var canvas = this.$()[0],
        ctx = canvas.getContext('2d'),
        stars = [],
        height = this.get('height'),
        width = this.get('width');

    for (var i = 0, len = this.get('starCount'); i < len; i++){
      stars.push([Math.random() * width, Math.random() * height, Math.random() * 2, 0.5 + Math.random() / 2]);
    }

    this.set('stars', stars);
    this.set('ctx', ctx);
    this.set('on', true);
  }.on('didInsertElement').observes('starCount', 'width', 'height'),

  kill: function(){
    this.set('on', false);
  }.on('willDestroyElement'),

  clear: function () {
    var ctx = this.get('ctx'),
        height = this.get('height'),
        width = this.get('width');
    ctx.fillStyle = 'black';
    ctx.clearRect(0, 0, width, height);
    ctx.beginPath();
    ctx.rect(0, 0, width, height);
    ctx.closePath();
    ctx.fill();
  },
  drawStars: function () {
    var stars = this.get('stars'),
        starCount = stars.length,
        ctx = this.get('ctx');
    for (var i = 0; i < starCount; i++) {
        ctx.fillStyle = 'rgba(255, 255, 0, ' + stars[i][3] + ')';
        ctx.beginPath();
        ctx.arc(stars[i][0], stars[i][1], stars[i][2], 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
    }
  },
  moveStars :function (e) {
    var stars = this.get('stars'),
        starCount = stars.length,
        height = this.get('height'),
        width = this.get('width');;
    for (var i = 0; i < starCount; i++) {
        if (stars[i][1] - stars[i][2] > height) {
            stars[i][0] = Math.random() * width;
            stars[i][2] = Math.random() * 2;
            stars[i][1] = 0 - stars[i][2];
            stars[i][3] = 0 + Math.random() / 2;
        } else {
            stars[i][1] += e;
        }
    }
  },
  gaze: function(){
    if(this.get('on')){
      this.loop();
    }
  }.observes('on'),
  loop: function () {
    if(!this.get('on')){
      return;
    }
    var refreshRate = this.get('refresh');
    this.clear();
    this.moveStars(3);
    this.drawStars();
    Em.run.later(this, this.loop, refreshRate);
  }

});

静态变量：

绑定变量：

原始答案（不适用，但信息良好）对于该模型，您将设置一条与路由器名称匹配的路由。如果你的路线是一个名词，通常你会使用

this.resource

，如果它是

动词，你会使用this.route

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('starfield')
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

应用程序中特定路线的路线
用于包装模型并与视图/模板交互的控制器
dom交互视图
不知道如何插入我的原始代码来制作画布动画。当我粘贴它的时候，它会产生无数的错误。你的原始代码是什么样子的，什么时候需要执行？是working star字段，我希望它在页面加载时执行。更新了我的建议，您可能可以进行优化，修改一些内容，但它应该向您展示ideaGreat，非常感谢，这为我打开了很多大门！
{{star-field width=300 height=200 starCount=20}}
{{star-field width=400 height=200 starCount=500 refresh=10}}
{{star-field width=100 height=100}}
{{star-field}}

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('starfield')
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.StarfieldRoute = Em.Route.extend({
  model:function(){
    return {apple:'cow'};
  }
});

App.StarfieldController = Em.ObjectController.extend({
  foo:'bar'
});

App.StarfieldView = Em.View.extend({
  click: function(){
    alert('you clicked this view!');
  }
});