JavaScript 加载 HTML 5 <canvas> 标签的问题

kouunn · 2016年05月18日 · 最后由 kouunn 回复于 2016年05月24日 · 2364 次阅读

rails 加载的时候无法直接加载需要手动刷新浏览器才能显示,请问题出在 哪里


 <canvas id="sakura"></canvas> 
<!-- sakura shader -->

<script id="sakura_point_vsh" type="x-shader/x_vertex">

uniform mat4 uProjection;

uniform mat4 uModelview;

uniform vec3 uResolution;

uniform vec3 uOffset;

uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius

uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start

。。。。。。。。

//set window.requestAnimationFrame

(function (w, r) {

    w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); };

})(window, 'equestAnimationFrame');

</script>
  1. 试试把 Turbolink 禁用掉
  2. 下次别贴这么长的代码了

#1 楼 @renyuanz 刚才试了一下,关闭 turbolink 起作用了,有没有不关闭 turbolink 的方法呢

#3 楼 @kouunn 感觉可以想办法让你的初始化代码监听 turbolink 的 page:load 事件

#4 楼 @qinfanpeng 我自己先找找看,初学者还不是很懂 rails ,因为关了 turbolink 一个页面读取进度条的 gem 就不能用了,谢谢你啊

#5 楼 @kouunn 楼上的意思是,你可以把你的初始化代码放到 application.js 中,把它放到一个 $(document).ready(function(){});的闭包里。

如果你用的是 Turbolinks 3,把

$(document).ready(function(){
  // 初始化你的canvas...
});
// 替换成
$(document).on('page:load', function(){
  // code...
});

如果是 Turbolinks 5

// 替换成
$(document).on('turbolinks:load', function(){
  // code...
});
需要 登录 后方可回复, 如果你还没有账号请 注册新账号