* 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); //載入畫布 ~~~