<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#out{
border: 1px solid #ccc;
position: absolute;
z-index: 999;
}
#con{
position: absolute;
height: 100px;
width: 200px;
line-height: 100px;
text-align: center;
font-size: 25px;
}
</style>
</head>
<body>
<canvas id="out" width="200" height="100"></canvas>
<div id="con"></div>
</body>
<script>
var cvs = document.getElementById("out")
var con = document.getElementById("con")
var arr = ["别墅","100w","谢谢惠顾"]
var i = Math.floor(Math.random()*arr.length)
con.innerHTML = arr[i]
var ctx = cvs.getContext("2d");
ctx.beginPath()
ctx.fillStyle="#ccc"
ctx.fillRect(0,0,cvs.width,cvs.height)
ctx.closePath()
cvs.onmousedown = function(){
document.onmousemove=function(e){
ctx.clearRect(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop,20,20)
}
document.onmouseup=function(){
document.onmousedown = null;
document.onmousemove=null;
}
}
</script>
</html>
Canvas画刮刮乐
猜你喜欢
转载自blog.csdn.net/qq_42697338/article/details/86548863
今日推荐
周排行