我想更改这些代码,以便它能够快速响应,并且更改浏览器大小不会成为问题
第一个代码:我需要将其更改为响应
html, body {
background: #333;
}
canvas{
position: absolute;
width: 100%; height: 100%;
top: 0; right: 0; bottom: 0; left: 0;
}

<canvas></canvas>
&#13;
var livePatern = {
canvas: null,
context: null,
cols: 0,
rows: 0,
colors: [252, 251, 249, 248, 241, 240],
triangleColors: [],
destColors: [],
init: function(){
this.canvas = document.getElementById('canvas');
this.context = this.canvas.getContext('2d');
this.cols = Math.floor(document.body.clientWidth / 24);
this.rows = Math.floor(document.body.clientHeight / 24) + 1;
this.canvas.width = document.body.clientWidth;
this.canvas.height = document.body.clientHeight;
this.drawBackground();
this.animate();
},
drawTriangle: function(x, y, color, inverted){
inverted = inverted == undefined ? false : inverted;
this.context.beginPath();
this.context.moveTo(x, y);
this.context.lineTo(inverted ? x - 22 : x + 22, y + 11);
this.context.lineTo(x, y + 22);
this.context.fillStyle = "rgb("+color+","+color+","+color+")";
this.context.fill();
this.context.closePath();
},
getColor: function(){
return this.colors[(Math.floor(Math.random() * 6))];
},
drawBackground: function(){
var eq = null;
var x = this.cols;
var destY = 0;
var color, y;
while(x--){
eq = x % 2;
y = this.rows;
while(y--){
destY = Math.round((y-0.5) * 24);
this.drawTriangle(x * 24 + 2, eq == 1 ? destY : y * 24, this.getColor());
this.drawTriangle(x * 24, eq == 1 ? destY : y * 24, this.getColor(), true);
}
}
},
animate: function(){
var me = this;
var x = Math.floor(Math.random() * this.cols);
var y = Math.floor(Math.random() * this.rows);
var eq = x % 2;
if (eq == 1) {
me.drawTriangle(x * 24, Math.round((y-0.5) * 24) , this.getColor(), true);
} else {
me.drawTriangle(x * 24 + 2, y * 24, this.getColor());
}
setTimeout(function(){
me.animate.call(me);
}, 10);
},
};
!function(){livePatern.init();}()
&#13;
借调代码:我需要将此更改为响应
* {
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
}
html, body {
height: 100%;
}
canvas{
height: 100%;
width: 100%;
}
&#13;
<canvas id="canvas"></canvas>
&#13;
window.onresize = function() {
ctx.clearRect(0,0,canvas.width, canvas.height);
//call again function;
}
&#13;
我想用:
companion object {
const val FLAG_PAGE_PROCESS = 0L//待处理
const val FLAG_PAGE_EXCEPTION = 1L//设备异常
const val FLAG_PAGE_UNCHECKED = 2L//未审核
const val FLAG_PAGE_AUDIT = 3L//统计
val FLAG_PAGE = "FLAG_PAGE"
fun newInstance(@FlagPageDef flagPage: Int): RepairFormsListFragment {
val fragment = RepairFormsListFragment()
val args = Bundle()
fragment.arguments = args
return fragment
}
@Retention(AnnotationRetention.SOURCE)
@IntDef(FLAG_PAGE_PROCESS, FLAG_PAGE_EXCEPTION, FLAG_PAGE_UNCHECKED, FLAG_PAGE_AUDIT)
annotation class FlagPageDef
}
但是动画是重复的。
答案 0 :(得分:0)
您正在设置加载时画布的大小,并保存所有即将进行的渲染。但相反,你可以做类似的事情;
//pseudo code, including only the idea.
windown.onload = function () {
var canvas = document.querySelector(...),
context = canvas.getContext('2d');
Dots.init();
function prepareCanvas (w, h) {
//set width and height
//do more nessessary stuff
}
(function loop () {
var w = window.innerWidth,
h = window.innerHeight;
prepareCanvas(w, h);
Dots.render(context, w, h);
window.requestAnimationFrame(loop);
})();
}
所以基本上,将宽度和高度作为参数添加到渲染方法中,因此显示大小如果发生变化则无关紧要。
更新,由于评论
缓存尺寸,而不是经常发生的尺寸。
window.onload = function () {
var w, h, resized = true;
window.addEventListener('resize', function () {
resized = true;
});
(function loop() {
if (resized) {
//get w, h
prepareCanvas(w, h);
resized = false;
}
Dots.render(context, w, h);
})();
}