码迷,mamicode.com
首页 > Web开发 > 详细

打印html5中Canvas的方法

时间:2017-04-23 11:56:37      阅读:308      评论:0      收藏:0      [点我收藏+]

标签:html5   reload   src   cli   line   click   body   new   cat   

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 id="canvas" width=300 height=300></canvas><br>
    <button id="printVoucher">Print</button>
</body>

 

打印html5中Canvas的方法

标签:html5   reload   src   cli   line   click   body   new   cat   

原文地址:http://www.cnblogs.com/LLSutdy/p/6751886.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!