改变HTML5的canvas默认值

最新推荐文章于 2021-06-10 16:18:31 发布

PHP__廊外诗鸽

最新推荐文章于 2021-06-10 16:18:31 发布

阅读量1k

点赞数

分类专栏： Html

本文链接：https://blog.csdn.net/tashanhongye/article/details/71643012

版权

Html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

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

PHP__廊外诗鸽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
改变HTML5的canvas默认值

html5下的canvas的高、宽是有限制的，其默认值是： w：300px, h： 150px；一开始我只是写着玩玩，简单的写了下面这段代码，结果显示是这样的：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <canvas i
复制链接

扫一扫