<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
position: absolute;
z-index: -1;
font-size: 26px;
text-align: center;
line-height: 100px;
font-style: italic;
font-weight: 700;
color: coral;
}
</style>
</head>
<body>
<div class="box"></div>
<canvas id="canvas"></canvas>
<script>
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
ctx.rect(1, 1, 200, 100);
ctx.fillStyle = '#ccc';
ctx.fill();
canvas.onmousedown = function(e) {
console.log(e)
canvas.onmousemove = function(e) {
ctx.clearRect(e.clientX, e.clientY, 8, 8);
}
}
canvas.onmouseup = function() {
canvas.onmousemove = null;
}
// 隨機給box內部生成標籤
const tags = ["謝謝惠顧", "一個億", "美女一個", "豪車一輛", "別墅一棟", "拖拉機一輛", "謝謝惠顧", "Mac筆記本"];
const box = document.querySelector(".box");
let random = Math.floor(Math.random() * (tags.length));
if (random === 1) { // 注意哦，一個億...還上個啥子班哦...
random = 0; // 空歡喜一場...套路太深...
}
box.innerHTML = tags[random];
</script>
</body>
</html>
canvas生成刮刮樂~~~
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章