canvas画图时，图形被拉伸问题

最新推荐文章于 2024-04-20 16:29:18 发布

6笔客

最新推荐文章于 2024-04-20 16:29:18 发布

阅读量9.4k

点赞数 1

分类专栏： html+css

本文链接：https://blog.csdn.net/lixianhaics/article/details/73431107

版权

html+css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

刚开始学习canvas，在画正方形时，使用了样式控制canvas的大小。但画出来的图形被拉伸了，严重变形。

<!doctype html>
<html>
    <head>
        <meta charset='UTF-8'>
        <meta name='renderer' content='webkit'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>canvas拉伸问题</title>
        <style>
           #pad{//使用样式控制时，画板被拉伸了
                width:500px;
                height:400px;
                border:1px solid #000;
            }
        </style>
    </head>
    <body>
        <canvas id='pad'></canvas>
        <script>
            var oPad = document.getElementById('pad');//获取ID
            var ctx = oPad.getContext('2d');//获取画布
            ctx.beginPath();//开始使用画布
            ctx.fillStyle= '#ccc';//填充颜色
            ctx.fillRect(20,20,100,100);//画正方形
        </script>
    </body>
</html>

被拉的图形：
这里写图片描述
正常效果：

原因是 canvas的默认大小是300*150大小（有的说是300*300，个人测试结果是300*150），当使用样式控制画布时，是相当于把固定的图片拉伸了，所以会变形。

解决办法有两种：

一种是设置canvas的属性：

<canvas id='pad' width='500' height='400'></canvas>

第二种是使用js设置属性：

var oPad = document.getElementById('pad');//获取ID
oPad.width=500;
oPad.height=400;

6笔客

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
canvas画图时，图形被拉伸问题

刚开始学习canvas，在画正方形时，使用了样式控制canvas的大小。但画出来的图形被拉伸了，严重变形。<!doctype html><html> <head> <meta charset='UTF-8'> <meta name='renderer' content='webkit'> <meta http-equiv='X-UA-Comp
复制链接

扫一扫