canvas 画布

 

使用画布来生成二维码

   <div class="canvascode">
             <img id="img3" style="width: 100%;height: 100%;"/> //背景图片
             <canvas id="myCanvas" class="hide" width="750" height="1190" style="border:1px solid #d3d3d3;background:#ffffff;"> //画布
                    Your browser does not support the HTML5 canvas tag.
             </canvas>
            <div id="qrcode" class="hide"></div>
	</div>

　　

<script type="text/javascript">
     $("#qrcode").qrcode("https://www.baidu.com/?tn=49055317_10_hao_pg"); //二维码跳转页面
     document.onreadystatechange = function () {
         if (document.readyState == "complete") {  //页面载入完成
             var c = document.getElementById("myCanvas");
             var ctx = c.getContext("2d");
             var imgbg = new Image();
             imgbg.src = "../static/images/canvasbg1.jpg";
             imgbg.onload = function () {
                 ctx.drawImage(imgbg, 0, 0)
                 var canvas = $("#qrcode canvas")[0];
                 var imgCode = new Image();
                 imgCode.src = canvas.toDataURL('image/png');
                 imgCode.onload = function () {
                     ctx.drawImage(imgCode, 530, 970, 200, 200);  //控制二维码位置、大小
                     var img3 = document.getElementById('img3');
                     img3.src = c.toDataURL('image/png');
                 }
             }
         }
     }    
</script>

 

 

document.onreadystatechange = subSomething; //当页面加载状态改变的时候执行这个方法.

readyState 属性返回当前文档的状态 

• uninitialized - 还未开始载入
• loading - 载入中
• interactive - 已加载，文档与用户可以开始交互
• complete - 载入完成

 

drawImage() 方法绘制一幅图像。

drawImage(image, x, y, width, height)