html5 – 画布弧太像素化了

前端之家收集整理的这篇文章主要介绍了html5 – 画布弧太像素化了前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我尝试在画布上绘制一个圆圈,之前我曾经这样做过,但这次我发现它非常像素化
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();

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

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

谢谢@H_403_5@

解决方法

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

例如.@H_403_5@

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

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

正确的方式:@H_403_5@

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

猜你在找的HTML5相关文章