小编Ste*_*rth的帖子

HTML5 Canvas 100%高度和宽度

我试图使这个雨滴画布脚本占据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)

html javascript css html5 canvas

10
推荐指数
1
解决办法
3万
查看次数

标签 统计

canvas ×1

css ×1

html ×1

html5 ×1

javascript ×1