* html部分 ~~~ <canvas id="canvas" width="400" height="534"></canvas> <img src="../../../skin/img/1.1.0/qrcode/bg.png" id="qrcode_bg" style="display: none;"> <img src="../../../skin/img/1.1.0/def_head.jpg" id="qrcode2" style="display: none;"> ~~~ * js部分 ~~~ // 创建画布 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var canvas_left = 0; //左偏移 var canvas_top = 0; //上偏移 var canvas_width = 400; //载体宽度 var canvas_height = 534; //载体高度 ctx.rect(canvas_left,canvas_top,canvas_width,canvas_height); ctx.fillStyle = "#FFFFFF"; ctx.fill(); // 装载背景 var bg = document.getElementById('qrcode_bg'); ctx.drawImage(bg,canvas_left,canvas_top,canvas_width,canvas_height); ctx.font = '60px Courier New'; ctx.fillText('我是文字',50,150); // 合成图2 var img2 = document.getElementById("qrcode2"); // 切割成圆 ctx.beginPath(); //初始当前路径 ctx.arc(55,55,50,0,2*Math.PI); //左偏移,上偏移,圆半径,弧度起始,弧度结束 ctx.stroke(); //绘制路径 ctx.clip(); //切割图形 ctx.drawImage(img2,5,5); //载入画布 ~~~