社会化的线上线下趣味活动。通过JavaScript 利用浏览器Canvas API技术绘制不同的留言图片。

独立完成。

地址:https://65.icupl.cn



 

核心代码:

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>法大,我想对你说</title>
<script src="js/jquery-2.1.3.min.js"></script>
<link href="css/custom.css" rel="stylesheet">
</head>

<body>
<div class="descriptions">
<div class="description_1">
<input name="myName" class="text_Area1" placeholder="名字" size="5" maxlength="7"> :
</div>
<!--第一个值-->
<input name="myClause" class="clause" placeholder="输入想说的话" size="10" maxlength="10">
<!--第二个值-->
<!--图片原图-->
<!img id="startBtn" src="images/startbtn.png">
<!--开始按钮-->
<img class="logo" src="images/cupl.jpg">
<div id="startBtn">生成我的故事</div>
</div>
<img id="starImg" src="./images/65.jpg" data-value="1">
<canvas id="main" class="img_Area"></canvas>
<!--canvas区域-->
<img id="endImg" class="endImgImg">
<!--将canvas转成图片存入img标签,用于保存图片-->
<div class="author">保存图片并分享故事为法大贺寿</div><br/><p>Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a></p><script src="https://s4.cnzz.com/z_stat.php?id=1261942967&web_id=1261942967" language="JavaScript"></script></div>

</body>
<script>
var strings = ["又去石油借馒头了啊",
"5:30 拓荒牛见",
"总书记还来吗",
"狗狗呢 小黑呢",
"来学活,有人有空吗?",
"今晚交西通作业了",
"打水了吗,马上7点了",
"军都还没关,买东西吗",
"帮我还本书可以吗",
"运动会,跑个5000?",
"网课刷完了没",
"不急,上课还有十分钟",
"握到书记的手了吗",
"帮我占个方鹏的座",
"习大大,我爱你",
"小石桥今天都推了",
"快点做,马上熄灯了",
"法大云盘居然有这剧",
"ZQY是我经济法动力啊",
"家安好可爱",
"啊啊没选上智慧的课",
"今年又没选上体育课",
"一食堂二楼好尊贵啊",
"拓荒猫生死背后",
"大叔,我要酸甜辣",
"奶茶大叔在送水杯",
"小黑去哪儿了",
"学霸猫真牛……",
"真羡慕猫,不背法条",
"非法专业也合法的",
"终于有空调了!!",
"去麦当劳刷夜?",
"哪个宿舍乱丢垃圾?",
"狙击手看了会沉默",
"哟, 都没课? ",
"结课论文汪洋大海",
"上完课就回去趟尸",
"西红柿银耳炒番茄",
"立志做大事",
"焦裕禄 >.<",
"要开学代会了",
"晚会赞助还没呢",
"今晚出任务",
"暑假一起去支教?",
"模法模法模法",
"辩论辩论辩论",
"起床起床起床",
"打水打水打水",
"背书背书背书",
"石油澡堂还好吗",
"化工北鼻寂寞吗",
"校园太小别出轨",
"晚上一起去撸串",
"忘了网课考试了…",
"欢乐谷!",
"国家博物馆!",
"故宫有新展览",
"终于有地铁了!",
"昌村天气怎么样",
"沙尘暴也要上课",
"课比天大",
"我是对面石油的",
"专家您好,我尿急",
"不评教选不了课",
"请问还有凉皮吗",
"论文查重8%",
"赚大钱,看刑法",
"一半人抓另一半人",
"通宵不达旦",
"图书馆10点上班",
"五一节在做作业",
"国庆不回家",
"火车票没买到TAT",
"飞机票现在好贵",
"思聪欧巴!",
"今晚健林来!",
"握过书记手坚决不洗手",
"晚会有健林",
"局座还来吗",
"和书记同框GET",
"乌鸦叼了个鸡蛋?!",
"谁杀死了猫",
"讨厌洗袜子……",
"洗衣机一直有人用",
"啊啊啊没发票啊",
"要报销发票不够…",
"没钱了……",
"双十一坚决不买",
"五月是剁手的季节",
"五月剁手有科学依据",
"生存还是…先上课…",
"迟来正义是不是正义",
"除斥期间",
"我没有和你达成合意",
"都算不上入罪标准",
"陈汉老师语言学家…",
"滴滴打滴法律问题",
"西直门我挤不上去",
"好久没吃石油馒头了",
"黄进大大教工食堂",
"快看,天上有彩虹",
"排票排了三层……",
"橄榄绿",
"同学您好,有时间吗",
"今天晚上有一个……",
"喊大声点才能听见啊",
"全世界最好的师兄",
"兰666委员会",
"宿舍委员会通过决议",
"澡堂水龙头坏了",
"起床厕所不能用…",
"一卡通又丢了",
"SPSS怎么弄 O.O",
"帮做多媒体作业好吗",
"我在写案件分析…",
"我还在看判决书…",
"马克思主义哲学",
"韦伯说……",
"《联邦党人文集》",
"《月亮与六便士》",
"library.cupl.edu.cn",
"江平!",
"《西窗法语》",
"7.50 上课 来得及",
"做个海报伐?",
"抢劫和强奸(张老师语",
"黄东欧巴!",
"我在宪法大道吃炸鸡",
"法镜",
"离婚广场 >.<",
"联合国宣言",
"《人权宣言》",
"《论自由》",
"汉谟拉比",
"亚洲最大法学书库",
"我睡觉习惯非洲时间",
"早上从正午开始",
"逸夫惊魂",
"地下通道地下党",
"小勺/大勺?",
"奶红/奶绿?",
"梅二排票!",
"青年要像一块玉",
"课比天大",
"口号第一颗扣子",
"线上抢票密钥",
"五官精巧,表情丰富",
"一周一学期",
"谁放屁,快开窗!",
"暖气不足戾气有余",
"九门专必同步学",
"哪里不会点哪里",
"校庆养生长跑",
"小排我来了!",
"今年论文必须手写",
"整本都是重点",
"抢票开始了!!",
"六点和小板凳去排票",
"教学评估终于结束了!",
"空调终于可以开了",
"又没地儿晾衣服(ಥ_ಥ)",
"宿舍突然没电了",
"三鲜过桥不加辣",
"床单在天台吹走啦",
"阿姨,冒菜少称点",
"食堂又出新品了",
"室友霸霸求带饭!",
"求帮领快递!",
"票圈帮转一下谢谢",
"麻烦大家帮填一下问卷!",
"今晚21:20开例会",
"司考440!",
"拓荒牛 澡篮子",
"还有酸菜鱼!"
]
//按钮点击事件
$('#startBtn').on('click', function() {
if ($('input').val() == "") {
alert("请先输入姓名");
} else {

hechen();
resizeCanvas();

$('.img').fadeIn();
//$('.descriptions').css('display','none');
$('.descriptions').slideUp('fast');
$('body').css('background-color', '#eee');
$('canvas').css('height', 'auto');
$('.note').delay(1000).fadeIn('slow');
$('.author').delay(2000).fadeIn('slow');
$('.copyright').delay(3000).fadeIn('slow');
}
});
//合成图片方法
var strNum = Math.floor(Math.random() * strings.length);

function hechen() {
var mainCtx = getCanvasContext('main'); //获取canvas
var starImg = new Image(); //声明图片对象
starImg.src = $('#starImg').attr('src'); //获取原图
var iwidth = $("#starImg").width(); //获取原图宽度
var iheight = $("#starImg").height(); //获取原图高度
//图片加载
starImg.onload = function() {
//先绘制图片到canvas,可绘制多个
//mainCtx.drawImage(图片对象,坐标x,坐标y,绘制宽度,绘制高度);
mainCtx.drawImage(starImg, 0, 0, iwidth - 30, iheight); //底图
//mainCtx.drawImage(starImg,0,0,iwidth-250,iheight-200);//二次绘图覆盖到底图可以用二维码
mainCtx.font = "5vw Microsoft Yahei"; //设置文字大小字体
mainCtx.fillStyle = "#fff"; //设置文字颜色
//开始绘制文字,可绘制多个
mainCtx.fillText($('.text_Area1').val() + ":", iwidth * 0.16, iheight * 0.25);
mainCtx.font = "6vw Microsoft Yahei"; //设置文字大小字体
if ($('.clause').val() == '') {
mainCtx.fillText(strings[strNum], iwidth * 0.16, iheight * 0.41);
} else {
mainCtx.fillText($('.clause').val(), iwidth * 0.16, iheight * 0.41);
}
//将图片存入img标签
saveImageInfo();
};
}
//获取canvas
function getCanvasContext(id) {
return document.getElementById(id).getContext("2d");
}
//定义canvas属性
function resizeCanvas() {
var mainCtx = getCanvasContext('main');
$('#main').attr("width", $("#starImg").width() - 30);
$('#main').attr("height", $("#starImg").height());

};
//将canvas绘出的图转成图片存入img
function saveImageInfo() {
var mycanvas = document.getElementById("main");
var image = mycanvas.toDataURL("image/png");
//$('#endImg').slideDown('slow').fadeOut('slow');
$('#endImg').attr('src', image);
$('#main').css("display", "none");
}
</script>

</html>