Canvas toDataURL()方法保存的图像分辨率低

Question

我用 HTML5 画布制作了一个多边形背景生成器，地址在：http://codepen.io/rfalor/pen/LhinJ。

以下是相关代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('canvasImg').src = dataURL;

当用户点击画布并随后点击“准备图像”时，右键保存的图像分辨率为低分辨率（300px x 150px），而非画布分辨率。如何让用户保存更高分辨率的图像？

- Rohit Falor

Answer 1

问题在于您正在使用CSS而不是canvas元素的width和height属性来调整画布的大小。当您这样做时，您只是拉伸画布，而不是增加元素的坐标空间。

我在您的代码中添加了以下内容：

canvas.width = 700;
canvas.height = 396;

那么我必须稍微修改您的随机函数，使其接受一个数字，因为它不总是500；

function randomize(num) {
    var a = Math.floor(Math.random() * num);
    return a;
}

现在，您可以像这样调用您的lineTo：

ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
ctx.lineTo(randomize(canvas.width), randomize(canvas.height));

然而我意识到你可能想让它比宽度和高度更大，这样你就看不见形状的边缘了，但我想你可以自己解决这个问题。

实时演示

下面是完全修改后的代码。

var canvas = document.getElementById('canvas');

function randomize(num) {
    var a = Math.floor(Math.random() * num);
    return a;
}

function sides() {
    var a = Math.floor(Math.random() * 10);
    return a;
}

function getRndColor() {
    var r = 255 * Math.random() | 0,
        g = 255 * Math.random() | 0,
        b = 255 * Math.random() | 0,
        alpha = 0.1; //Math.random().toFixed(1);
    var final = 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
    return final;
}

$('*').click(function () {
    clearInterval(timer);
    $('button').show();
});

$('button').click(function () {
    $(this).css('left', '-400px');
    $('h3').text("Right click and save a beautiful background!");
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var dataURL = canvas.toDataURL();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    document.getElementById('canvasImg').src = dataURL;
    $('#canvasImg').css('border', '5px solid black');
    $('#canvas').hide();
    $('#canvasImg').show();
});

if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var left = true;

    canvas.width = 700;
    canvas.height = 396;

    var timer = setInterval(function () {
        for (var i = 1; i <= 1000; i++) {
            ctx.beginPath();
            if (left) {
                ctx.moveTo(0, randomize(canvas.height));
                left = false;
            } else {
                ctx.moveTo(randomize(canvas.width), 0);
                left = true;
            }
            ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
            ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
            ctx.fillStyle = getRndColor();
            ctx.fill();
        }
    }, 1000);
}

- Loktar