改变HTML5的canvas默认值

来源：互联网发布：windows 车载编辑：程序博客网时间：2024/06/06 03:12

html5下的canvas的高、宽是有限制的，其默认值是： w：300px, h： 150px；

一开始我只是写着玩玩，简单的写了下面这段代码，结果显示是这样的：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <canvas id="mycanvas"></canvas>    <script type="text/javascript">        var c=document.getElementById("myCanvas");        var cxt=c.getContext("2d");        cxt.fillStyle="#CB54D2";        cxt.fillRect(0,0,500,300);    </script></body></html>

本打算整出的色块要比脸大一点，可结果没想到，显示是这副德行：

这与500px完全不符吗！，后来我改成这样：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <canvas id="myCanvas" width="500" height="300"></canvas>    <script type="text/javascript">        var c=document.getElementById("myCanvas");        var cxt=c.getContext("2d");        cxt.fillStyle="#CB54D2";        cxt.fillRect(0,0,500,300);    </script></body></html>

这里写图片描述

这样貌似可以了，在canvas与fillRect中两次定义500,300这样有点多余，于是我改成下面这样：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <canvas id="mycanvas"></canvas>    <script type="text/javascript">        var canva=document.getElementById("mycanvas");        var x=canva.width=500;        var y=canva.height=300;        var b=canva.getContext("2d");        b.fillStyle="#CB54D2";        b.fillRect(0,0,x,y);    </script></body></html>

这样是不是更舒服一点，但结果还是一样的。

0 0