var canvas, context;
var img,//圖片對象
imgIsLoaded,//圖片是否加載完成;
imgX = 0,
imgY = 0,
imgScale = 0.52;
(function int() {
canvas = document.getElementById(‘myCanvas‘); //畫布對象
canvas.width = screen.width;
canvas.height = screen.height;
context = canvas.getContext(‘2d‘);//畫布顯示二維圖片
loadImg();
})();
function loadImg() {
img = new Image();
img.onload = function () {
imgIsLoaded = true;
drawImage();
}
img.src = ‘./images/shareImg.png‘;
}
function drawImage() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(
img, //規定要使用的圖像、畫布或視頻。
10, 50, //開始剪切的 x 坐標位置。
img.width, img.height, //被剪切圖像的高度。
imgX, imgY,//在畫布上放置圖像的 x 、y坐標位置。
img.width * imgScale, img.height * imgScale //要使用的圖像的寬度、高度
);
context.fillStyle = "#fbba15";
context.font="35px microsoft yahei";
context.fillText(level*level,255,190);
context.fillText(score+"秒",168,265);
}

canvas生成水印圖，並且分享