Question

我尝试在画布上绘制一个圆圈，之前我曾经这样做过，但是这次我发现它非常像素化了

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();

http://jsfiddle.net/RG6dn/6/

我不知道这是否是由于浏览器（我在chrome和firefox上有相同的东西）或我的电脑

由于

Answer 1

您可能正在使用CSS设置画布的宽度。在CSS中更改canvas元素的宽度会拉伸画布中的像素

例如

<canvas style='width:400px;height:400px'></canvas>

相反，您需要使用canvas元素本身的width和height属性来定义画布包含的像素数。

正确的方式：

<canvas width='400px' height='400px'><canvas>

Answer 2

这篇文章不是最近的，但它帮助我解决了我的问题，但答案有误。初始化画布的高度和宽度时，我们不会传递带有“ px”单位的字符串，而只会传递带有数字的字符串。像这样：

inner_roll()

Ajouve：在您的代码中，您犯了一个错误，更正了该错误之后

<canvas width='400' height='400'><canvas>

画布弧太像素化了

2 个答案: