Javascript 窗口大小调整后阻止HTML5画布
我试图完成的只是在画布调整大小后在画布上重新绘制一些东西。我的问题是，画布调整大小后，似乎什么也没有出现在画布上。我还尝试在调整大小处理程序中添加一些简单的代码来绘制矩形，我注意到，在调整窗口大小期间，矩形显示为，之后画布留空。下面是我的代码Javascript 窗口大小调整后阻止HTML5画布,javascript,jquery,canvas,html5-canvas,draw,Javascript,Jquery,Canvas,Html5 Canvas,Draw,我试图完成的只是在画布调整大小后在画布上重新绘制一些东西。我的问题是，画布调整大小后，似乎什么也没有出现在画布上。我还尝试在调整大小处理程序中添加一些简单的代码来绘制矩形，我注意到，在调整窗口大小期间，矩形显示为，之后画布留空。下面是我的代码 var canvass = document.getElementById('zipper-canvas'); var ctx = canvass.getContext('2d'); var repetitions; va
var canvass = document.getElementById('zipper-canvas');
var ctx = canvass.getContext('2d');
var repetitions;
var firstRowX = 0; var firstRowY ;
var secondRowX = 5; var secondRowY ;
$(function() {
canvass.width = window.innerWidth;
repetitions = canvass.width / 10;
canvass.height = 30;
ctx = canvass.getContext('2d');
firstRowY = canvass.height / 2 - 3;
secondRowY = canvass.height / 2 + 1;
redraw();
//resize the canvass to fill browser window dynamically
window.addEventListener('resize', resizecanvass, false);
//for some reason i cannot draw on the canvas after it was resized
function resizecanvass() {
canvass.width = window.innerWidth;
repetitions = canvass.width / 10;
canvass.height = 30;
ctx = canvass.getContext('2d');
firstRowY = canvass.height / 2 - 3;
secondRowY = canvass.height / 2 + 1;
/**
* Your drawings need to be inside this function otherwise they will be reset when
* you resize the browser window and the canvass goes will be cleared.
*/
redraw();
}
function redraw() {
canvass = document.getElementById("zipper-canvas");
ctx = canvass.getContext('2d');
ctx.clearRect(0, 0, canvass.width, canvass.height);
console.log(repetitions);
for (var r = 0; r < repetitions; r++) {
ctx.beginPath();
ctx.rect(firstRowX, firstRowY, 5, 5);
ctx.fillStyle = "#edeeef";
ctx.fill();
ctx.closePath();
firstRowX = firstRowX + 10;
}
for (var r2 = 0; r2 < repetitions; r2++) {
ctx.beginPath();
ctx.rect(secondRowX, secondRowY, 5, 5);
ctx.fillStyle = "#a2a3a5";
ctx.fill();
ctx.closePath();
secondRowX = secondRowX + 10;
}
}
});
var canvass=document.getElementById（'zippers-canvas'）；
var ctx=canvass.getContext（'2d'）；
var重复；
var firstRowX=0；var firstRowY；
var secondRowX=5；第二罗威；
$（函数（）{
canvass.width=window.innerWidth；
重复次数=画布宽度/10；
画布高度=30；
ctx=canvass.getContext（'2d'）；
firstRowY=画布高度/2-3；
secondRowY=画布高度/2+1；
重画（）；
//调整画布大小以动态填充浏览器窗口
window.addEventListener（'resize'，resizeCanvas，false）；
//由于某些原因，调整画布大小后，我无法在画布上绘制
函数resizecanvass（）{
canvass.width=window.innerWidth；
重复次数=画布宽度/10；
画布高度=30；
ctx=canvass.getContext（'2d'）；
firstRowY=画布高度/2-3；
secondRowY=画布高度/2+1；
/**
*您的图形需要位于该功能内，否则将在
*调整浏览器窗口的大小，画布将被清除。
*/
重画（）；
}
函数重画（）{
canvass=document.getElementById（“拉链画布”）；
ctx=canvass.getContext（'2d'）；
ctx.clearRect（0，0，canvass.width，canvass.height）；
控制台日志（重复）；
对于（var r=0；r<重复；r++）{
ctx.beginPath（）；
ctx.rect（firstRowX，firstRowY，5,5）；
ctx.fillStyle=“#edeef”；
ctx.fill（）；
ctx.closePath（）；
firstRowX=firstRowX+10；
}
对于（变量r2=0；r2<重复；r2++）{
ctx.beginPath（）；
ctx.rect（secondRowX，secondRowY，5,5）；
ctx.fillStyle=“#a2a3a5”；
ctx.fill（）；
ctx.closePath（）；
secondRowX=secondRowX+10；
}
}
});
firstRowXsecondRowXvar canvass=document.getElementById（'zippers-canvas'）；
//可能是康斯特
var firstRowX=0；
var secondRowX=5；
//在装载时设置正确的尺寸
调整画布的大小（）；
//调整画布大小以动态填充浏览器窗口
window.addEventListener（'resize'，resizeCanvas，false）；
//由于某些原因，调整画布大小后，我无法在画布上绘制
函数resizecanvass（）{
canvass.width=window.innerWidth；
画布高度=30；
/**
*您的图形需要位于该功能内，否则将在
*调整浏览器窗口的大小，画布将被清除。
*/
重画（）；
}
函数重画（）{
var ctx=canvass.getContext（'2d'）；
ctx.clearRect（0，0，canvass.width，canvass.height）；
变量重复=画布宽度/10；
var firstRowY=画布高度/2-3；
var secondRowY=画布高度/2+1；
对于（var r=0；r<重复；r++）{
ctx.beginPath（）；
ctx.rect（firstRowX+r*10，firstRowY，5，5）；
ctx.fillStyle=“#edeef”；
ctx.fill（）；
ctx.closePath（）；
}
对于（变量r2=0；r2<重复；r2++）{
ctx.beginPath（）；
ctx.rect（secondRowX+r2*10，secondRowY，5,5）；
ctx.fillStyle=“#a2a3a5”；
ctx.fill（）；
ctx.closePath（）；
}
}画布{
外形：1px纯黑；
}
正文、html、画布{
边距：0px；填充：0px；
}