Html HTML5 中的画布宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4938346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Canvas width and height in HTML5
提问by Dustin
Is it possible to fix the width and height of an HTML5 canvaselement?
是否可以修复 HTML5canvas元素的宽度和高度？
The usual way is the following :
通常的方法如下：
<canvas id="canvas" width="300" height="300"></canvas>
回答by Phrogz
The canvasDOM element has .heightand .widthproperties that correspond to the height="…"and width="…"attributes. Set them to numeric values in JavaScript code to resize your canvas. For example:
的canvasDOM元素具有.height和.width对应的属性的height="…"和width="…"属性。在 JavaScript 代码中将它们设置为数值以调整画布的大小。例如：
var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = 800;
canvas.height = 600;
Note that this clears the canvas, though you should follow with ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);to handle those browsers that don't fully clear the canvas. You'll need to redraw of any content you wanted displayed after the size change.
请注意，这会清除画布，但您应该遵循ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);处理那些未完全清除画布的浏览器。您需要重绘大小更改后想要显示的任何内容。
Note further that the height and width are the logical canvas dimensions used for drawing and are differentfrom the style.heightand style.widthCSS attributes. If you don't set the CSS attributes, the intrinsic size of the canvas will be used as its display size; if you do set the CSS attributes, and they differ from the canvas dimensions, your content will be scaled in the browser. For example:
进一步注意的是，高度和宽度是用于绘制逻辑帆布尺寸和是不同的距离style.height和style.widthCSS属性。如果不设置 CSS 属性，画布的固有大小将用作其显示大小；如果您确实设置了 CSS 属性，并且它们与画布尺寸不同，则您的内容将在浏览器中缩放。例如：
// Make a canvas that has a blurry pixelated zoom-in
// with each canvas pixel drawn showing as roughly 2x2 on screen
canvas.width = 400;
canvas.height = 300;
canvas.style.width = '800px';
canvas.style.height = '600px';
See this live exampleof a canvas that is zoomed in by 4x.
查看放大 4 倍的画布的现场示例。
var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
ctx.lineWidth = 1;
ctx.strokeStyle = '#f00';
ctx.fillStyle = '#eff';
ctx.fillRect( 10.5, 10.5, 20, 20 );
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.fillRect( 40, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.fillRect( 70, 10, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );
ctx.strokeStyle = '#fff';
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );body { background:#eee; margin:1em; text-align:center }
canvas { background:#fff; border:1px solid #ccc; width:400px; height:160px }<canvas width="100" height="40"></canvas>
<p>Showing that re-drawing the same antialiased lines does not obliterate old antialiased lines.</p>回答by gman
A canvas has 2 sizes, the dimension of the pixels in the canvas (it's backingstore or drawingBuffer) and the display size. The number of pixels is set using the the canvas attributes. In HTML
画布有 2 种尺寸，画布中像素的尺寸（后备存储或绘图缓冲区）和显示尺寸。使用画布属性设置像素数。在 HTML 中
<canvas width="400" height="300"></canvas>
Or in JavaScript
或者在 JavaScript 中
someCanvasElement.width = 400;
someCanvasElement.height = 300;
Separate from that are the canvas's CSS style width and height
与此分开的是画布的 CSS 样式宽度和高度
In CSS
在 CSS 中
canvas { /* or some other selector */
width: 500px;
height: 400px;
}
Or in JavaScript
或者在 JavaScript 中
canvas.style.width = "500px";
canvas.style.height = "400px";
The arguably best way to make a canvas 1x1 pixels is to ALWAYS USE CSSto choose the size then write a tiny bit of JavaScript to make the number of pixels match that size.
可以说，制作 1x1 像素画布的最佳方法是始终使用 CSS来选择大小，然后编写一点点 JavaScript 以使像素数与该大小匹配。
function resizeCanvasToDisplaySize(canvas) {
// look up the size the canvas is being displayed
const width = canvas.clientWidth;
const height = canvas.clientHeight;
// If it's resolution does not match change it
if (canvas.width !== width || canvas.height !== height) {
canvas.width = width;
canvas.height = height;
return true;
}
return false;
}
Why is this the best way? Because it works in most cases without having to change any code.
为什么这是最好的方法？因为它在大多数情况下都可以工作，而无需更改任何代码。
Here's a full window canvas:
这是一个完整的窗口画布：
const ctx = document.querySelector("#c").getContext("2d");
function render(time) {
time *= 0.001;
resizeCanvasToDisplaySize(ctx.canvas);
ctx.fillStyle = "#DDE";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.save();
const spacing = 64;
const size = 48;
const across = ctx.canvas.width / spacing + 1;
const down = ctx.canvas.height / spacing + 1;
const s = Math.sin(time);
const c = Math.cos(time);
for (let y = 0; y < down; ++y) {
for (let x = 0; x < across; ++x) {
ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
ctx.strokeRect(-size / 2, -size / 2, size, size);
}
}
ctx.restore();
requestAnimationFrame(render);
}
requestAnimationFrame(render);
function resizeCanvasToDisplaySize(canvas) {
// look up the size the canvas is being displayed
const width = canvas.clientWidth;
const height = canvas.clientHeight;
// If it's resolution does not match change it
if (canvas.width !== width || canvas.height !== height) {
canvas.width = width;
canvas.height = height;
return true;
}
return false;
}body { margin: 0; }
canvas { display: block; width: 100vw; height: 100vh; }<canvas id="c"></canvas>And Here's a canvas as a float in a paragraph
这是一个画布作为段落中的浮动
const ctx = document.querySelector("#c").getContext("2d");
function render(time) {
time *= 0.001;
resizeCanvasToDisplaySize(ctx.canvas);
ctx.fillStyle = "#DDE";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.save();
const spacing = 64;
const size = 48;
const across = ctx.canvas.width / spacing + 1;
const down = ctx.canvas.height / spacing + 1;
const s = Math.sin(time);
const c = Math.cos(time);
for (let y = 0; y <= down; ++y) {
for (let x = 0; x <= across; ++x) {
ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
ctx.strokeRect(-size / 2, -size / 2, size, size);
}
}
ctx.restore();
requestAnimationFrame(render);
}
requestAnimationFrame(render);
function resizeCanvasToDisplaySize(canvas) {
// look up the size the canvas is being displayed
const width = canvas.clientWidth;
const height = canvas.clientHeight;
// If it's resolution does not match change it
if (canvas.width !== width || canvas.height !== height) {
canvas.width = width;
canvas.height = height;
return true;
}
return false;
}span {
width: 250px;
height: 100px;
float: left;
padding: 1em 1em 1em 0;
display: inline-block;
}
canvas {
width: 100%;
height: 100%;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus venenatis metus. Mauris ac nibh at odio scelerisque scelerisque. Donec ut enim <span class="diagram"><canvas id="c"></canvas></span>
vel urna gravida imperdiet id ac odio. Aenean congue hendrerit eros id facilisis. In vitae leo ullamcorper, aliquet leo a, vehicula magna. Proin sollicitudin vestibulum aliquet. Sed et varius justo.
<br/><br/>
Quisque tempor metus in porttitor placerat. Nulla vehicula sem nec ipsum commodo, at tincidunt orci porttitor. Duis porttitor egestas dui eu viverra. Sed et ipsum eget odio pharetra semper. Integer tempor orci quam, eget aliquet velit consectetur sit amet. Maecenas maximus placerat arcu in varius. Morbi semper, quam a ullamcorper interdum, augue nisl sagittis urna, sed pharetra lectus ex nec elit. Nullam viverra lacinia tellus, bibendum maximus nisl dictum id. Phasellus mauris quam, rutrum ut congue non, hendrerit sollicitudin urna.
</p>Here's a canvas in a sizable control panel
这是一个相当大的控制面板中的画布
const ctx = document.querySelector("#c").getContext("2d");
function render(time) {
time *= 0.001;
resizeCanvasToDisplaySize(ctx.canvas);
ctx.fillStyle = "#DDE";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.save();
const spacing = 64;
const size = 48;
const across = ctx.canvas.width / spacing + 1;
const down = ctx.canvas.height / spacing + 1;
const s = Math.sin(time);
const c = Math.cos(time);
for (let y = 0; y < down; ++y) {
for (let x = 0; x < across; ++x) {
ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
ctx.strokeRect(-size / 2, -size / 2, size, size);
}
}
ctx.restore();
requestAnimationFrame(render);
}
requestAnimationFrame(render);
function resizeCanvasToDisplaySize(canvas) {
// look up the size the canvas is being displayed
const width = canvas.clientWidth;
const height = canvas.clientHeight;
// If it's resolution does not match change it
if (canvas.width !== width || canvas.height !== height) {
canvas.width = width;
canvas.height = height;
return true;
}
return false;
}
// ----- the code above related to the canvas does not change ----
// ---- the code below is related to the slider ----
const $ = document.querySelector.bind(document);
const left = $(".left");
const slider = $(".slider");
let dragging;
let lastX;
let startWidth;
slider.addEventListener('mousedown', e => {
lastX = e.pageX;
dragging = true;
});
window.addEventListener('mouseup', e => {
dragging = false;
});
window.addEventListener('mousemove', e => {
if (dragging) {
const deltaX = e.pageX - lastX;
left.style.width = left.clientWidth + deltaX + "px";
lastX = e.pageX;
}
});body {
margin: 0;
}
.frame {
display: flex;
align-items: space-between;
height: 100vh;
}
.left {
width: 70%;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
canvas {
width: 100%;
height: 100%;
}
pre {
padding: 1em;
}
.slider {
width: 10px;
background: #000;
}
.right {
flex 1 1 auto;
}<div class="frame">
<div class="left">
<canvas id="c"></canvas>
</div>
<div class="slider">
</div>
<div class="right">
<pre>
* controls
* go
* here
<- drag this
</pre>
</div>
</div>here's a canvas as a background
这是一个画布作为背景
const ctx = document.querySelector("#c").getContext("2d");
function render(time) {
time *= 0.001;
resizeCanvasToDisplaySize(ctx.canvas);
ctx.fillStyle = "#DDE";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.save();
const spacing = 64;
const size = 48;
const across = ctx.canvas.width / spacing + 1;
const down = ctx.canvas.height / spacing + 1;
const s = Math.sin(time);
const c = Math.cos(time);
for (let y = 0; y < down; ++y) {
for (let x = 0; x < across; ++x) {
ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
ctx.strokeRect(-size / 2, -size / 2, size, size);
}
}
ctx.restore();
requestAnimationFrame(render);
}
requestAnimationFrame(render);
function resizeCanvasToDisplaySize(canvas) {
// look up the size the canvas is being displayed
const width = canvas.clientWidth;
const height = canvas.clientHeight;
// If it's resolution does not match change it
if (canvas.width !== width || canvas.height !== height) {
canvas.width = width;
canvas.height = height;
return true;
}
return false;
}body { margin: 0; }
canvas {
display: block;
width: 100vw;
height: 100vh;
position: fixed;
}
#content {
position: absolute;
margin: 0 1em;
font-size: xx-large;
font-family: sans-serif;
font-weight: bold;
text-shadow: 2px 2px 0 #FFF,
-2px -2px 0 #FFF,
-2px 2px 0 #FFF,
2px -2px 0 #FFF;
}<canvas id="c"></canvas>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus venenatis metus. Mauris ac nibh at odio scelerisque scelerisque. Donec ut enim vel urna gravida imperdiet id ac odio. Aenean congue hendrerit eros id facilisis. In vitae leo ullamcorper, aliquet leo a, vehicula magna. Proin sollicitudin vestibulum aliquet. Sed et varius justo.
</p>
<p>
Quisque tempor metus in porttitor placerat. Nulla vehicula sem nec ipsum commodo, at tincidunt orci porttitor. Duis porttitor egestas dui eu viverra. Sed et ipsum eget odio pharetra semper. Integer tempor orci quam, eget aliquet velit consectetur sit amet. Maecenas maximus placerat arcu in varius. Morbi semper, quam a ullamcorper interdum, augue nisl sagittis urna, sed pharetra lectus ex nec elit. Nullam viverra lacinia tellus, bibendum maximus nisl dictum id. Phasellus mauris quam, rutrum ut congue non, hendrerit sollicitudin urna.
</p>
</div>Because I didn't set the attributes the only thing that changed in each sample is the CSS (as far as the canvas is concerned)
因为我没有设置属性，所以每个示例中唯一改变的是 CSS（就画布而言）
Notes:
笔记：
- Don't put borders or padding on a canvas element. Computing the size to subtract from the number of dimensions of the element is troublesome
- 不要在画布元素上放置边框或内边距。计算从元素的维数中减去的大小很麻烦
回答by user1463699
Thank you very much! Finally I solved the blurred pixels problem with this code:
非常感谢！最后我用这段代码解决了模糊像素问题：
<canvas id="graph" width=326 height=240 style='width:326px;height:240px'></canvas>
<canvas id="graph" width=326 height=240 style='width:326px;height:240px'></canvas>
With the addition of the 'half-pixel' does the trick to unblur lines.
添加“半像素”可以消除线条模糊。
回答by rohan parab
The best way to do it :
最好的方法是：
<canvas id="myChart" style="height: 400px; width: 100px;"></canvas>
