码迷,mamicode.com
首页 > 其他好文 > 详细

canvas生成水印图,并且分享

时间:2018-01-15 16:36:08      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:完成   var   context   level   div   wim   eve   切图   视频   

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

标签:完成   var   context   level   div   wim   eve   切图   视频   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!