Ste*_*rth 10 html javascript css html5 canvas
我试图使这个雨滴画布脚本占据100%的宽度和高度,但我似乎没有做任何工作.我尝试在Canvas区域中更改CSS和高度/宽度,但它不会改变任何东西,或者它根本不起作用.有一次我尝试了一些实际上是全尺寸的东西,它似乎对雨滴有一种奇怪的效果,它们变得模糊不清,所以它必须实际上拉伸画布而不是使它变大.这是默认800x800像素画布的代码.
样式
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
画布的脚本
<script type="text/javascript">
var canvas = null;
var context = null;
var bufferCanvas = null;
var bufferCanvasCtx = null;
var flakeArray = [];
var flakeTimer = null;
var maxFlakes = 200; // Here you may set max flackes to be created
function init() {
canvas = document.getElementById('canvasRain');
context = canvas.getContext("2d");
bufferCanvas = document.createElement("canvas");
bufferCanvasCtx = bufferCanvas.getContext("2d");
bufferCanvasCtx.canvas.width = context.canvas.width;
bufferCanvasCtx.canvas.height = context.canvas.height;
flakeTimer = setInterval(addFlake, 200);
Draw();
setInterval(animate, 30);
}
function animate() {
Update();
Draw();
}
function addFlake() {
flakeArray[flakeArray.length] = new Flake();
if (flakeArray.length == maxFlakes)
clearInterval(flakeTimer);
}
function blank() {
bufferCanvasCtx.fillStyle = "rgba(0,0,0,0.8)";
bufferCanvasCtx.fillRect(0, 0, bufferCanvasCtx.canvas.width, bufferCanvasCtx.canvas.height);
}
function Update() {
for (var i = 0; i < flakeArray.length; i++) {
if (flakeArray[i].y < context.canvas.height) {
flakeArray[i].y += flakeArray[i].speed;
if (flakeArray[i].y > context.canvas.height)
flakeArray[i].y = -5;
flakeArray[i].x += flakeArray[i].drift;
if (flakeArray[i].x > context.canvas.width)
flakeArray[i].x = 0;
}
}
}
function Flake() {
this.x = Math.round(Math.random() * context.canvas.width);
this.y = -10;
this.drift = Math.random();
this.speed = Math.round(Math.random() * 5) + 1;
this.width = (Math.random() * 3) + 2;
this.height = this.width;
}
function Draw() {
context.save();
blank();
for (var i = 0; i < flakeArray.length; i++) {
bufferCanvasCtx.fillStyle = "white";
bufferCanvasCtx.fillRect(flakeArray[i].x, flakeArray[i].y, flakeArray[i].width, flakeArray[i].height);
}
context.drawImage(bufferCanvas, 0, 0, bufferCanvas.width, bufferCanvas.height);
context.restore();
}
</script>
最后这是身体
<body onload="init()">
<canvas id="canvasRain" width="800px" height="800px">Canvas Not Supported</canvas>
</body>
maf*_*afu 12
body, #canvasRain {width:100%; height:100%; margin:0px;}将正确设置您的尺寸,但问题是您用于绘图的画布高度/宽度在使用px%'设置它们时没有获取正确的值.而这正是缩放与模糊片一起出现的地方.它需要一些默认的画布大小并延伸到视图的100%.添加类似的东西
bufferCanvas.width = canvas.width = window.innerWidth;
bufferCanvas.height = canvas.height = window.innerHeight;
似乎可以做到这一点.您可能希望/需要处理调整大小事件以重新计算它.这是一个例子.我无法让jsFiddle为我工作,所以这只是整件事.
| 归档时间： |
|
| 查看次数： |
28896 次 |
| 最近记录： |