如何制作画布图以完全填充浏览器? [英] How do I make a canvas drawing to completely fill the browser?
本文介绍了如何制作画布图以完全填充浏览器?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我当前拥有的代码.
Here's the code I currently have.
<!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轴上重复.
I'd like to keep the height and width dimensions the same for the canvas shape but it'd be great to have this completely fill the browser 100% or basically repeat indefinitely, similar to the CSS value for a background-image to repeat on both x and y axis.
最终，我想在条纹上再添加两种或三种颜色，但是由于我是陌生人，所以我只是隐约地了解这段代码中的情况.
Eventually, I'd like to add two or three more colors to the stripes, but I only vaguely understand what's going on in this code since I'm brand new to it.
推荐答案
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;
}
}
}
这篇关于如何制作画布图以完全填充浏览器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
