Question

我正在打印iFrame中的画布。当我打印时，分辨率显示太差了。

我认为我应该让画布更大，并将其缩放到正常大小。

HTML：

<iframe width="80px" height="80px" id="printframe">

JS：

var frame = document.getElementById("printframe");
var frame_canvas = frame.contentWindow.document;
frame_canvas.body.innerHTML = '<canvas id="myCanvas" width="980px" style="border: 1px solid black;"></canvas>';

var canvas = frame_canvas.getElementById("myCanvas");

canvas.getContext("2d").scale(0.5, 0.5); // should it be make the 
canvas smaller? its not working

var context = canvas.getContext("2d"); 
context.font = "50px"; // normal size is 10px
context.fillText("This is text to print !!!");

frame.contentWindow.print(); // it prints but resolution is too bad

有没有办法扩展它，或使画布分辨率更好？

帮帮我，谢谢..

Answer 1

画布实际上有两种尺寸：元素本身的大小和元素绘图表面的大小。设置元素的width和height属性可以设置这两个大小; CSS属性仅影响元素的大小，而不影响绘图表面。

一种解决方法是通过JavaScript设置画布的高度和重量，如下所示：

var canvas = frame_canvas.getElementById("myCanvas");

canvas.width = 300;
canvas.height = 300;

如果这不起作用，您可以尝试缩放画布，如下所示：

context.scale(2,2);

如何在填充文本后在javascript中缩放画布？

1 个答案: