是否有正确的方法来指定画布元素的大小,例如毫米,以便如果我将其打印出来,它将具有正确的大小？
我试过这个简单的例子：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"
style="border:1px solid #c3c3c3; width:50mm; height:50mm;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,150,75);
</script>
</body>
</html>
但在屏幕上画布是45毫米而不是50毫米,当打印时它的55毫米^^
解决方法
第1部分：生成50mm打印图纸需要多少画布像素？
打印机通常以每英寸300像素打印.
以毫米为单位：300ppi / 25.4 mm-in = 11.81像素/毫米.
因此,如果您想要打印50毫米的绘图,您将计算所需的像素大小,如下所示：
50毫米x 11.81ppm = 590.5像素(591像素)
并且您将画布调整为591像素(假设为方形),如下所示：
// resize the canvas to have enough pixels to print 50mm drawing c.width=591; c.height=591;
第2部分：将画布导出为图像
要打印画布,您需要将画布转换为可以使用context.toDataURL执行的图像.
// create an image from the canvas var img50mm=new Image(); img50mm.src=canvas.toDataURL();
第3部分：将导出的图像转换为正确的打印分辨率
context.toDataURL始终创建一个每英寸72像素的图像.
打印机通常以更高的分辨率打印,每英寸可能有300像素.
因此,要使导出的图像在页面上正确打印,导出的图像必须从72ppi转换为300ppi.
ImageMagick库可以进行转换：http://www.imagemagick.org/
它是服务器端工具,因此您必须将导出的图像从服务器上弹回(可能使用AJAX来往返图像).
ImageMagick适用于PHP,IIS和其他服务器环境.
这是一个使用PHP转换图像分辨率并将转换后的图像回送给调用者的示例：
// Assume you've uploaded the exported image to
// "uploadedImage.png" on the server
<?PHP
$magic = new Imagick();
$magic->setimageUnits(imagick::RESOLUTION_PIXELSPERINCH);
$im->setimageResolution(300,300);
$im->readImage("uploadedImage.png");
$im->setimageFormat("png");
header("Content-Type: image/png");
echo $im;
?>
最后部分：打印出来！
从服务器收到的转换后的文件将在300ppi打印机上打印50mm方形图像.