为什么画布圈看起来不像圆圈？ [英] Why is the canvas circle not looking like a circle?

问题描述

我有一个非常简单的代码应该绘制一个圆，但它看起来不像一个，而不是在正确的位置坐标都有点偏移。画布设置为 style =width：600px; height：600px;。我在chrome和safari上试过它 - 看起来一样，所以它不是浏览器的bug。
所以我的问题是（两者都有一个答案）：

I have a very simple code that should draw a circle, but its not looking like one, and not at the right position The coordinates are all somewhat shifted. The canvas is set to style="width: 600px; height: 600px;". I tried it on chrome and safari - looks the same so it's not a browser bug. So my questions are (there is probably one answer for both):

1. 如果我把中心放在（100， 100），为什么圆与左边界的距离不等，它是从顶部边界开始的？


2. 为什么（300,300）指出了画布，而不是在中心？

代码：

var context = document.getElementById('c').getContext("2d");
context.fillStyle = 'black';
context.fill();
context.beginPath();
context.arc(100, 100, 30, 0, 2 * Math.PI, true);
context.stroke();

它看起来如何：

How it looks:

根据评论我发现编写< canvas id =myCanvasstyle =width：578px; height：200px;>< / canvas> 导致了这个问题问题，写< canvas id =myCanvaswidth =578height =200>< / canvas> 解决它。有谁知道为什么？

According to the comment I found out that writing <canvas id="myCanvas" style="width: 578px; height: 200px;"></canvas> is causing this problem, and writing <canvas id="myCanvas" width="578" height="200"></canvas> solves it. Anyone knows why?

推荐答案

这是在 HTML5 Canvas规范。

HTML属性 width =xheight =y描述绘图区域画布并默认为 300×150像素。作为副作用，它们描述了画布的默认可见大小。

The HTML attributes width="x" height="y" describe the drawing area of the canvas and default to 300 × 150 px. As a side-effect, they describe the default visible size of the canvas.

CSS属性 width：x ;高度：y; 在画布上设置可以拉伸/压缩该绘图区域，但它们不会改变它的大小。

The CSS properties width: x; height: y; set on the canvas can stretch/compact that drawing area, but they don't change its size.

在你的情况下，浏览器拉伸默认绘图区域（ 300×150 px ）以满足给定的CSS 600×600 px 。

In your case, the browser stretches the default drawing area (300 × 150 px) to meet the given CSS of 600 × 600 px.

这篇关于为什么画布圈看起来不像圆圈？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！