-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (83 loc) · 3.15 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
<body>
<canvas id="cvs" width="4572" height="1018" style="border:1px solid #ccc;margin:20px auto;display: block;">
当前浏览器不支持canvas
<!-- 如果浏览器支持canvas，则canvas标签里的内容不会显示出来 -->
</canvas>
<div></div>
<button>+++++++++</button>
</body>
<script>
// 定义日期
let drawTime = moment()
//获取canvas元素
var cvs = document.getElementById("cvs");
function auto() {
//创建image对象
var imgObj = new Image();
imgObj.src = "./fake.png";
//待图片加载完后，将其显示在canvas上
imgObj.onload = function () {
var ctx = cvs.getContext('2d');
ctx.drawImage(this, 0, 0);//this即是imgObj,保持图片的原始大小：470*480
//ctx.drawImage(this, 0, 0,1024,768);//改变图片的大小到1024*768
let monthAndDay = drawTime.format('MM-DD ')
let fileName = drawTime.format('YYYY-MM-DD')
// 写字
ctx.font = '70px bold 宋体';
//字体颜色
ctx.fillStyle = '#383f4f';
// 第1处文字
let text = monthAndDay + '00:01:23';
let y = 400;
ctx.fillText(text, 125, y);
// 第2处文字
text = monthAndDay + '00:01:43';
ctx.fillText(text, 775, y);
// 第3处文字
text = monthAndDay + '00:02:03';
ctx.fillText(text, 775 + 650, y);
// 第4处文字
text = monthAndDay + '00:02:23';
ctx.fillText(text, 775 + 650 + 650, y);
// 第5处文字
text = monthAndDay + '00:02:33';
ctx.fillText(text, 775 + 650 + 650 + 650, y);
// 第6处文字
ctx.font = '24px bold 宋体';
//字体颜色
ctx.fillStyle = '#929292';
text = drawTime.format('YYYY.MM.DD ') + '00:02:43';
ctx.fillText(text, 3551 - 21, y + 56 - 3);
// 第7处文字
text = drawTime.format('YYYY.MM.DD ') + '00:02:59';
ctx.fillText(text, 4209 - 21, y + 56 - 3);
// 保存
exportCanvasAsPNG('cvs', fileName)
function exportCanvasAsPNG(id, fileName) {
var canvasElement = document.getElementById(id);
var MIME_TYPE = "image/png";
var imgURL = canvasElement.toDataURL(MIME_TYPE);
var dlLink = document.createElement('a');
dlLink.download = fileName;
dlLink.href = imgURL;
dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
document.body.appendChild(dlLink);
dlLink.click();
document.body.removeChild(dlLink);
}
// 清除文字
ctx.clearRect(0, 0, 4572, 1018)
}
// 日期+1
drawTime = drawTime.add(1, 'day')
}
setInterval(auto, 2000)
</script>
</html>