首页 > 其他 > 详细

canvas生成水印图,并且分享

时间:2018-01-15 15:52:11      阅读:277      评论:0      收藏:0      [点我收藏+]

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生成水印图,并且分享

原文:https://www.cnblogs.com/wanpisces/p/8288344.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!