我尝试在画布上绘制一个圆圈,之前我曾经这样做过,但这次我发现它非常像素化
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,Math.PI*2,true);
this.ctx.closePath();
this.ctx.fill();
}
this.draw2 = function(){
this.ctx.beginPath();
this.ctx.arc(100,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设置画布的宽度.在CSS中更改canvas元素的宽度会拉伸画布中的像素
例如.
< canvas style ='width：400px; height：400px'>< / canvas>
相反,您需要使用canvas元素本身的width和height属性来定义画布包含的像素数.
正确的方式：
< canvas width ='400px'height ='400px'>< canvas>
