js 给html设置dpi,javascript - Higher DPI graphics with HTML5 canvas

Canvases have two different 'sizes': their DOM width/height and their CSS width/height. You can increase a canvas' resolution by increasing the DOM size while keeping the CSS size fixed, and then using the .scale() method to scale all of your future draws to the new bigger size. Here's an example:

function changeResolution(canvas, scaleFactor) {

// Set up CSS size.

canvas.style.width = canvas.style.width || canvas.width + 'px';

canvas.style.height = canvas.style.height || canvas.height + 'px';

// Resize canvas and scale future draws.

canvas.width = Math.ceil(canvas.width * scaleFactor);

canvas.height = Math.ceil(canvas.height * scaleFactor);

var ctx = canvas.getContext('2d');

ctx.scale(scaleFactor, scaleFactor);

}

The canvas default resolution is 96dpi (CSS inches, not based on the actual screen). So a scaleFactor of 2 gives 192dpi, 3 is 288dpi, etc. In fact, here's a version that should give your desired DPI:

function setDPI(canvas, dpi) {

// Set up CSS size.

canvas.style.width = canvas.style.width || canvas.width + 'px';

canvas.style.height = canvas.style.height || canvas.height + 'px';

// Resize canvas and scale future draws.

var scaleFactor = dpi / 96;

canvas.width = Math.ceil(canvas.width * scaleFactor);

canvas.height = Math.ceil(canvas.height * scaleFactor);

var ctx = canvas.getContext('2d');

ctx.scale(scaleFactor, scaleFactor);

}

Have fun! Note that both these code samples can only be used once per canvas, they assume the current DOM size is the original (they could be tweaked to change that). Also the rescaling needs to happen before you do any drawing on the canvas. Thanks to this post for the method and information!

Edit: Here is a more robust function that will scale future draws and maintain existing canvas contents. This can be called to rescale multiple times.

function setDPI(canvas, dpi) {

// Set up CSS size.

canvas.style.width = canvas.style.width || canvas.width + 'px';

canvas.style.height = canvas.style.height || canvas.height + 'px';

// Get size information.

var scaleFactor = dpi / 96;

var width = parseFloat(canvas.style.width);

var height = parseFloat(canvas.style.height);

// Backup the canvas contents.

var oldScale = canvas.width / width;

var backupScale = scaleFactor / oldScale;

var backup = canvas.cloneNode(false);