canvas生成水印图，并且分享

Posted 2020-10-20 wanpisces

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);
}