这是我目前的代码。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
function draw()
{
var diagCanvas = document.getElementById("diag-cnvs");
diagCanvas.height=window.innerHeight;
diagCanvas.width=window.innerWidth;
if (diagCanvas.getContext)
{
var ctx = diagCanvas.getContext("2d");
var h = w = 100;
var color1 = 'rgba(255,0,0,1)';
var color2 = 'rgba(255,0,0,.2)';
var x = y = 0;
while(y<diagCanvas.height)
{
while(x<diagCanvas.width)
{
ctx.fillStyle = color2;
ctx.fillRect( x, y, w, h);
ctx.fillStyle = color1;
ctx.lineTo( x, y);
ctx.lineTo( x+w/2, y);
ctx.lineTo( x, y+h/2);
ctx.lineTo( x, y);
ctx.moveTo( x+w, y);
ctx.lineTo( x+w, y+h/2);
ctx.lineTo( x+w/2, y+h);
ctx.lineTo( x, y+h);
ctx.fill();
ctx.closePath();
x+=w;
}
y+=h;
x=0;
}
}
}
$(function() {
draw();
})
</script>
<style>
canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas height="100" width="100" id="diag-cnvs"></canvas>
</body>
</html>
我想保持画布形状的高度和宽度尺寸相同,但是将它完全填满浏览器100%或基本上无限重复,这很好,类似于背景图像的CSS值在x轴和y轴上重复。
最后,我想在条纹上添加两三种颜色,但我只是模糊地理解这段代码中发生了什么,因为我对它不熟悉。
答案 0 :(得分:3)
function draw()
{
var diagCanvas = document.getElementById("diag-cnvs");
if(document.documentElement.offsetHeight<window.innerHeight)
diagCanvas.height = window.innerHeight;
else
diagCanvas.width = document.documentElement.offsetHeight;
diagCanvas.width=document.documentElement.offsetWidth;
if (diagCanvas.getContext)
{
var ctx = diagCanvas.getContext("2d");
var h = w = 100;
var color1 = 'rgba(255,0,0,1)';
var color2 = 'rgba(255,0,0,.2)';
var x = y = 0;
while(y<diagCanvas.height)
{
while(x<diagCanvas.width)
{
ctx.fillStyle = color2;
ctx.fillRect( x, y, w, h);
ctx.fillStyle = color1;
ctx.lineTo( x, y);
ctx.lineTo( x+w/2, y);
ctx.lineTo( x, y+h/2);
ctx.lineTo( x, y);
ctx.moveTo( x+w, y);
ctx.lineTo( x+w, y+h/2);
ctx.lineTo( x+w/2, y+h);
ctx.lineTo( x, y+h);
ctx.fill();
ctx.closePath();
x+=w;
}
y+=h;
x=0;
}
}
}
答案 1 :(得分:1)
您是否将此画布添加到页面的body元素中? 另外,你可以尝试
position: absolute; top: 0px; left: 0px;
答案 2 :(得分:0)
使用css:
#diag-cnvs{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
}
答案 3 :(得分:0)
这应该是可能的,我已经用Canvas完成了,虽然代码在家里而且我在工作,所以我会把它应该是什么。有一点需要指出,如果你想让它保持图像/画布的正确宽高比,那么你需要使用JavaScript(我无法弄明白,有人启发我),否则你可以使用纯CSS:< / p>
... header (snip) ...
</head>
<body>
<div id="Page">
<canvas id="MyCanvas" width="500" height="500"></canvas>
</div>
</body>
</html>
和CSS:
body { width: 100%; height: 100%; }
#Page { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
#MyCanvas { height: 100%; width: 100%; }
如果不起作用,请尝试将#MyCanvas更改为
#MyCanvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
我确信这是有效的,我已经开始工作了,下班回家时我会仔细查看我的代码。