<canvas id="canvas"></canvas>
<canvas id="water"></canvas>
<img src="" id="imgShow" alt=""/>
var ca = document.getElementById("canvas");var ctx = ca.getContext("2d");var water = document.getElementById("water");var waterCtx = water.getContext("2d");var imgShow = document.getElementById("imgShow");ca.width = 900;ca.height = 600;water.width = 200;water.height = 50;var img = new Image();img.src = "img.jpg";// 水印canvas的樣式waterCtx.font = "30px Aril bold";waterCtx.fillStyle = "rgba(0,0,0,.3)";waterCtx.textBaseline = "midddle";waterCtx.fillText("芳芳芳芳付", 20, 30);// 圖片加載完後,去執行其餘操做img.onload = function(){ ctx.drawImage(img,ca.width - img.width,ca.height - img.height); ctx.drawImage(water,ca.width - water.width,ca.height - water.height); var imgOut = ca.toDataURL("image/jpeg"); imgShow.src = imgOut;}