我试着在 Canvas 上画一个圆圈,我以前也这样做过,但我发现这次画得很像素化
var game;
function game (){
this.canvas = document.getElementById('canvas');
this.ctx = this.canvas.getContext('2d');
this.initCanvas = function(){
}
this.draw1 = function(){
this.ctx.beginPath();
this.ctx.arc(50, 75, 10, 0, Math.PI*2, true);
this.ctx.closePath();
this.ctx.fill();
}
this.draw2 = function(){
this.ctx.beginPath();
this.ctx.arc(100,75,10,0,Math.PI*2,true);
this.ctx.closePath();
this.ctx.stroke();
}
this.run = function(){
this.initCanvas();
this.draw1();
this.draw2();
}
window.onresize = function() {
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
};
}
game = new game();
不知道是浏览器的问题(我在chrome和firefox上都是一样的)还是我的电脑问题
谢谢
最佳答案
您可能正在使用 CSS 设置 Canvas 的宽度。在 CSS 中改变 Canvas 元素的宽度会拉伸(stretch) Canvas 内的像素
例如。
<canvas style='width:400px;height:400px'></canvas>
相反,您需要使用 Canvas 元素本身的宽度和高度属性来定义 Canvas 包含多少像素。
正确的做法:
<canvas width='400px' height='400px'><canvas>
关于html - Canvas 弧度太像素化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13876234/