iT邦幫忙

2021 iThome 鐵人賽

DAY 2
14
Software Development

奇怪的知識增加了!原來程式還可以這樣用?!系列 第 2

[Day2] 人資秒跪! 全台唯一線上刮刮樂履歷上線囉!

又到了找工作寫履歷的季節呢!
還在用104、CakeResume製作千篇一律的履歷嗎?

這邊教大家用HTML + CSS + JavaScript 做出互動式履歷(點擊連結可以玩),讓人資們在看你履歷時得到快感,娛樂百分百!

使用環境

步驟說明

  1. 準備一張履歷圖片、一張加了馬賽克的履歷圖片(將想讓人資刮開的地方打碼)
  2. 撰寫程式(手機版和網頁版不同)
  3. 將圖片放到img資料夾下,包含程式檔上傳至GitHub

程式碼-電腦版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>電腦版刮刮履歷</title>
		<style type="text/css">
			#c1{
				border: 1px solid white;
				position: absolute;
			}
			
			#c2{
				border: 1px solid white;
			}
			
			body{
				position: relative;
			}
		</style>
	</head>
	<body>
		
		<canvas id="c1" width="3000" height="5000"></canvas>
		
		<canvas id="c2" width="3000" height="5000"></canvas>
		
	</body>
	<script type="text/javascript">
		var c1 = document.getElementById("c1");
		var c2 = document.getElementById("c2");
		
		var ctx1 = c1.getContext("2d");
		var ctx2 = c2.getContext("2d");
		
		
		// 將完整履歷放到下層  canvas2
		var imgs = new Image();
		imgs.src = 'img/after.jpg';
		imgs.onload = function(){
			ctx2.drawImage(this,0,0)
		}
		
		// 需要刮的履歷放在上層  canvas1
		var img2 = new Image();
		img2.src = 'img/before.jpg';
		img2.onload = function(){
			ctx1.drawImage(this,0,0)
		}
		
		// 監聽canvas的onmousedown事件
		c1.onmousedown = function(ev){
		c1.onmousemove = function(e){
			console.log(e);
			var w = 50;			// 清除筆刷的寬度
			var h = 50;			// 清除筆刷的高度
			var x = e.pageX-c1.offsetLeft - w/2;    // 清除筆刷的x位置
			var y = e.pageY-c1.offsetTop - h/2;		// 清除筆刷的y位置
			ctx1.clearRect(x,y,w,h);
		}
		}
		c1.onmouseup = function(ev){
		// 取消onmousemove事件
		c1.onmousemove = null;
		}

	</script>
</html>

完成結果影片

多有神祕感你看看!這個版本只有電腦才能刮喔!
如果有人想看手機版的教學請在下方留言 (會有人留言嗎)

當人資耗費九牛二虎之力才得到你的姓名和聯絡資訊,就像愛情理論一樣,付出越多越會珍惜。
因此HR大概率會直接打電話請你明天來上班,請密切注意手機來電!

(把履歷放上GitHub變成連結的部分我們明天再教學喔)


上一篇
[Day1] 上班打混妙招! 光明正大偷看影片的方法!
下一篇
[Day3] 完全免費! 一分鐘在GitHub建立個人網站!
系列文
奇怪的知識增加了!原來程式還可以這樣用?!31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
whitefloor
iT邦研究生 2 級 ‧ 2021-09-02 12:25:58

我笑了
那個天線寶寶

lulu_meat iT邦研究生 5 級 ‧ 2021-09-02 14:09:22 檢舉

不敢露臉哈哈哈XD

1
dscwferp
iT邦高手 1 級 ‧ 2021-09-02 13:04:27

想看手機版

lulu_meat iT邦研究生 5 級 ‧ 2021-09-02 13:07:50 檢舉

太棒了! 我還在煩惱要怎麼湊滿30篇呢!
那我後天就專門寫一篇手機版顆顆

1
hankuo
iT邦新手 5 級 ‧ 2021-09-02 13:18:49

我以為今天會是上一篇的Mac版教學嗚嗚,那下一篇可以出手機版的這個教學嗎>< 謝謝!

1
gior__ann
iT邦新手 2 級 ‧ 2021-09-02 13:49:00

/images/emoticon/emoticon15.gif
很多人資應該都是肉眼掃描機~ 大多沒時間慢慢看 ~ 所以還是要小心XDD

看更多先前的回應...收起先前的回應...
lulu_meat iT邦研究生 5 級 ‧ 2021-09-02 14:10:11 檢舉

其實我自己也不太敢這樣用
(所以分享給大家 看其他人用了會有什麼效果)

gior__ann iT邦新手 2 級 ‧ 2021-09-02 14:16:58 檢舉

/images/emoticon/emoticon01.gif

等大家分享~
如果過年沒錢錢~ 可以做給朋友玩,自己玩

lulu_meat iT邦研究生 5 級 ‧ 2021-09-02 14:19:19 檢舉

台灣彩券刮刮樂其實我也有寫這個XDD

gior__ann iT邦新手 2 級 ‧ 2021-09-02 14:23:05 檢舉

/images/emoticon/emoticon12.gif
過年可以發了~每人一張 XDD

1
King Tzeng
iT邦新手 3 級 ‧ 2021-09-02 13:56:50

真的好猛XDDDD(笑了XD

lulu_meat iT邦研究生 5 級 ‧ 2021-09-02 14:15:09 檢舉

我有看您出的書!!!太高興了!
謝謝大神留言!
/images/emoticon/emoticon24.gif

1
EN
iT邦好手 1 級 ‧ 2021-09-02 18:27:10

笑死 XDDD

1
neverend327
iT邦新手 5 級 ‧ 2021-09-02 19:33:47

有夠有趣的XD
很期待後面幾篇的內容

lulu_meat iT邦研究生 5 級 ‧ 2021-09-02 22:29:30 檢舉

先跟您道個歉 我極有可能辜負您
這種靈感可遇不可求
/images/emoticon/emoticon16.gif

1
jiatool
iT邦研究生 4 級 ‧ 2021-09-03 10:42:16

為什麼我覺得 HR 會直接跳過 XDDD
不過確實蠻有趣的~

1
ITlikeman
iT邦新手 5 級 ‧ 2021-09-04 10:47:33

哈哈哈~~打算轉職Hr,每天都有中獎的樂趣。

1
彭偉鎧
iT邦研究生 3 級 ‧ 2021-09-06 11:54:40

應徵彩券行可能錄取機會比較大!/images/emoticon/emoticon39.gif

lulu_meat iT邦研究生 5 級 ‧ 2021-09-06 11:56:02 檢舉

沒關係! 我很喜歡我現在的工作XDD

1
cheerupche
iT邦新手 5 級 ‧ 2021-09-07 09:46:13

笑死XDDD
有趣到我的第一則留言獻給大大(?)

lulu_meat iT邦研究生 5 級 ‧ 2021-09-07 10:05:28 檢舉

太感動了! 希望您看到後面也會來留言~/images/emoticon/emoticon37.gif

1
Neil
iT邦新手 5 級 ‧ 2021-09-09 22:32:35

笑死,太有才了 XD

0
st474ddr
iT邦新手 2 級 ‧ 2021-11-19 17:58:56

期待勇者提交之後對方人資的反應

我要留言

立即登入留言