canvas教程

打印html5中Canvas的方法

字号+ 作者:H5之家 来源:H5之家 2017-05-01 15:03 我要评论( )

本文是对打印html5中Canvas的方法的讲解,对学习JavaScript编程技术有所帮助,与大家分享。

[摘要]本文是对打印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>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • HTML5新特性详解(三)

    HTML5新特性详解(三)

    2017-04-30 16:03

  • HTML5实现微信拍摄上传照片功能

    HTML5实现微信拍摄上传照片功能

    2017-04-30 09:01

网友点评