我定义了两个函数来渲染一个圆和一个三角形。非常直接的东西。
function circle(offset, size){
var color = $("#color option:selected").val();
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
radius = size * 1;
context.beginPath();
context.arc(offset, 2, radius, 0, 2 * Math.PI, false);
context.fillStyle = color;
context.fill();
}
function triangle(offset, size){
var color = $("#color option:selected").val();
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = size * 6;
var height = size * 5;
var padding = 0;
// Draw a path
context.beginPath();
context.moveTo(offset + width/2, padding);
context.lineTo(offset + width, height + padding);
context.lineTo(offset, height + padding);
context.closePath();
// Fill the path
context.fillStyle = color;
context.fill();
}
我已将 Canvas 添加到我的页面:
<canvas id="canvas"></canvas>
出于某种原因,我可以看到圆形和方形未正确呈现。请参阅随附的屏幕截图。
最佳答案
我几乎可以保证这是因为您使用 CSS 宽度和高度而不是 <canvas>
来设置 Canvas 的宽度和高度。 html 属性。
您需要在 Canvas 标签中定义宽度/高度:<canvas width="500" height="500">
或在代码中:
var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;
而不是通过 CSS。如果您这样做:
<canvas style="width: 500px; height: 500px;">
然后您将拥有一个 300x150 的 Canvas (默认大小),它被缩放/变形为 500x500,这几乎肯定是您得到的。
(上面是我徒手写的,所以可能有错别字,但你明白了)
关于html - Canvas 项目无法正确呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10095585/