画布弧太像素化 [英] canvas arc too pixelated

问题描述

我尝试在画布上绘制一个圆形，我以前做过，但我发现这个时候非常像素化。

I try to draw an circles in canvas, I ever do it before but i found it very pixelated this time

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上）或我的电脑

I don't know if this is due to the browser ( I have the same thing on chrome and firefox ) or my computer

感谢

推荐答案

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

You probably were setting the width of your canvas using CSS. Altering the width of a canvas element in CSS stretches the pixels within the canvas

例如

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

使用canvas元素本身的width和height属性来定义画布包含多少像素。

Instead, you need to use the width and height properties of the canvas element itself to define how many pixels the canvas contains.

正确的方式：

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

这篇关于画布弧太像素化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！