我试图使这个雨滴画布脚本占据100%的宽度和高度,但我似乎没有做任何工作.我尝试在Canvas区域中更改CSS和高度/宽度,但它不会改变任何东西,或者它根本不起作用.有一次我尝试了一些实际上是全尺寸的东西,它似乎对雨滴有一种奇怪的效果,它们变得模糊不清,所以它必须实际上拉伸画布而不是使它变大.这是默认800x800像素画布的代码.
样式
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
Run Code Online (Sandbox Code Playgroud)
画布的脚本
<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 …Run Code Online (Sandbox Code Playgroud)