提问人：bruceatk 提问时间：10/6/2008 最后编辑：bruceatk 更新时间：3/19/2013 访问量：5412
是否可以只打印画布元素？
Is it possible to print just the canvas element?
问：
我创建了一个网页，可让您输入一些信息，然后根据该信息在画布元素中绘制图像。除了打印之外，我几乎按照我想要的方式工作。
有没有办法打印出画布元素，或者创建一个新窗口来绘制，这是唯一的方法？
更新：
答案很简单。我正在考虑更复杂的解决方案。
我希望我能选择不止一个答案。当我使用 * 禁用显示时，我无法打印画布。最简单的解决方案是关闭我用于输入的表单，在 @media print{} 内的 CSS 中使用表单 {display：none;}。感谢您的快速回复。
@media print {
form {
display:none;
}
}
答：
1赞
Darryl Hein
10/6/2008
#1
我不是 100% 确定支持，但您可以使用 CSS 并在标签中放置一个属性。在这个CSS文件中，只需隐藏打印时不想显示的元素：<link>media="print"display:none;
5赞
Zack The Human
10/6/2008
#2
你可以尝试这样的东西：
@media print {
* {
display:none;
}
#SOME-CANVAS-ID {
display:block;
}
}
我不确定画布是否默认是块的，但您可以尝试类似的东西，看看它是否有效。这个想法是，只要规则的优先级更高，它就会隐藏打印媒体的所有内容 （*），除了其他一些任意元素（这就是我使用 ID 选择器的原因）。
编辑：如果CSS3（特别是否定伪类）得到更多支持，您的规则可以像这样简单：
*:not(canvas) {
display:none;
}
但是，这可能会导致隐藏 <html> 和 <body> 标签，从而有效地隐藏您的画布......
评论
0赞
olliej
10/6/2008
我知道 Safari 支持 ：not（），如果 Opera 不支持，我会感到震惊，我相信 firefox trunk 支持它（我不知道 Firefox 3.0）——鉴于它们是真正支持 Canvas 元素的浏览器，这应该足够:D
0赞
olliej
10/6/2008
css3.info/selectors-test/test.html 声称所有 3 个都支持 not -- 所以如果你使用的是 canvas，：not（） 就可以了。
0赞
Dedan
11/23/2012
#3
您可以尝试创建仅用于打印的画布：
this.Print = function () {
var printCanvas = $('#printCanvas');
printCanvas.attr("width", mainCanvas.width);
printCanvas.attr("height", mainCanvas.height);
var printCanvasContext = printCanvas.get(0).getContext('2d');
window.print();
}
评论