[摘要]本文是对打印html5中Canvas的方法的讲解,对学习JavaScript编程技术有所帮助,与大家分享。
function print_voucher(){ // 打印的主要方法 var win=window.open(); win.document.write("<br><img src='"+canvas.toDataURL()+"'/>"); win.print(); win.location.reload(); }
需要打开一个窗口进行打印,示例代码如下:
<script> $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); ctx.fillStyle="gold"; ctx.strokeStyle="blue"; ctx.lineWidth=5; ctx.rect(50,50,100,100); ctx.fill(); ctx.stroke(); function print_voucher(){ var win=window.open(); win.document.write("<br><img src='"+canvas.toDataURL()+"'/>"); win.print(); win.location.reload(); } $("#printVoucher").click(function(){ print_voucher(); }); }); // end $(function(){}); </script> <body> <canvas width=300 height=300></canvas><br> <button>Print</button> </body>