目录
效果演示: 文末获取源码
代码目录:
主要代码实现:
CSS样式:
body {
background: rgb(8, 8, 58);
margin: 0;
}
#wrapper {
width: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
JavaScript代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elf Gift Catch</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<canvas id="canvas" width="450" height="540"></canvas>
</div>
<div style="display:none">
<img id="elf" width="200" height="200" src='data:image/png;base64,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