代码之家 › 专栏 › 技术社区 › amit_vickey

没有得到实际的画布高度和宽度,fillRec()t被模糊了

html5-canvas css html

amit_vickey · 技术社区 · 7 年前

我刚开始 <canvas> 在HTML中,我面临一些问题。

我试着用CSS设置画布的宽度和高度,但是没有得到实际的值,也就是说,即使在CSS中改变了高度,它也总是给我150的高度和300的宽度。
fillRect()给了我模糊的图像,但我想要清晰的图像。为此,我寻找其他资源,其中说fillRect()和strokeRect()一半在x,y坐标内,一半在x,y坐标外。这是 link 为了这个。但我不明白他到底在做什么来解决这个问题。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Drawing</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        h1 {
            background-color: #2DE0E6;
            color: black;
            text-align: center;
            font-style: oblique;
            width: 100%;
            height: 100px;
            line-height: 100px;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-family: 'Courier New';
            font-size: 40px;
        }
        #canvas-container {
            width: 100%;
            text-align: center;
            margin: auto;
            float: right;
        }
        #myCanvas {
            border: 1px solid #c3c3c3;
            width: 65%;
            height: 450px;
            display: inline;
        }
    </style>
</head>
<body>
    <h1>Canvas Drawing</h1>
    <div id="canvas-container">
        <canvas id="myCanvas"></canvas>
        <br /><br />
        Draw a rectangle
    </div>

    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        context.fillStyle = "#FF0000";
        context.fillRect(5.5, 10.5, 90, 80);
    </script>
</body>
</html>

此外,还提供了一些深入了解 <画布>

1 回复 | 直到 7 年前

Pato Salazar 7 年前

你的问题是画布有两种尺寸:实际尺寸 HTML 元素大小和绘图表面大小

height 和 width 内部属性 canvas 元素。

150 十 300 一直是像素。这是canvas元素的默认大小。实际上,您并没有更改画布元素的大小,只更改其绘图表面的大小。

像这样更改画布元素

<canvas id="myCanvas" width="600" height="800"></canvas>

javascript 动态更改和 宽度

var canvas = document.getElementById('myCanvas');
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight / 2;

通过这种方式更改大小可以调整元素和绘图表面的大小。调整大小 CSS

模糊的图像可能是您画布大小调整错误的结果,但我不确定。

Canvas Basic Usage

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

9 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

9 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

9 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

9 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

10 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

10 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

10 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

10 月前