canvas添加水印

<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;}
相關文章
相關標籤/搜索