简易画板：
<!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>
*{
padding: 0;
margin: 0;
}
#cvs{
border: 1px solid #ddd;
}
</style>
</head>
<body>
<canvas id="cvs" width="500" height="400"></canvas>
<button id="btn">画画</button>
<button id="btn1">清除</button>
<button id="btn2">重画</button>
</body>
<script>
var cvs=document.getElementById("cvs");
var ctx=cvs.getContext("2d");
var btn=document.getElementById("btn")
var btn1=document.getElementById("btn1")
var btn2=document.getElementById("btn2")
btn.onclick=function(){
cvs.onmousedown=function(e){
ctx.beginPath();
ctx.moveTo(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop);
document.onmousemove=function(e){
ctx.lineTo(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop);
ctx.strokeStyle="red";
ctx.lineWidth=3;
ctx.stroke()
}
document.onmouseup=function(){
document.onmousedown=null;
document.onmousemove=null;
}
}
}
btn1.onclick=function(){
cvs.onmousedown=function(){
document.onmousemove=function(e){
ctx.clearRect(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop,10,10)
}
}
document.onmouseup=function(){
document.onmousedown=null;
document.onmousemove=null;
}
}
btn2.onclick=function(){
ctx.clearRect(0,0,cvs.width,cvs.height);
}
</script>
</html>
简易pc端刮刮乐：
<!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>
*{
padding: 0;
margin: 0;
}
#cvs{
border: 1px solid #ddd;
position: absolute;
z-index: 9;
left: 20%;
top: 20%;
}
#con{
width: 200px;
height: 100px;
position: absolute;
font-size: 24px;
line-height: 100px;
text-align: center;
left: 20%;
top: 20%;
}
</style>
</head>
<body>
<canvas id="cvs" width="200" height="100">你的浏览器不支持canvas插件，请更换后重试</canvas>
<div id="con">大奖</div>
</body>
<script>
var cvs=document.getElementById("cvs");
var con=document.getElementById("con");
var ctx=cvs.getContext("2d");
var arr=["一等奖","劳斯莱斯幻影","谢谢惠顾","辣条一包","对象一个","谢谢惠顾","谢谢惠顾","谢谢惠顾","谢谢惠顾"]
var i=Math.floor(Math.random()*arr.length);
con.innerHTML=arr[i];
ctx.beginPath();
ctx.fillStyle="#f1f1f1";
ctx.fillRect(0,0,200,100);
ctx.closePath();
ctx.beginPath();
ctx.font="bold 40px 宋体";
ctx.strokeStyle="#000";
ctx.strokeText("刮刮乐",50,60);
ctx.beginPath();
cvs.onmousedown=function(){
document.onmousemove=function(e){
var x=e.clientX-cvs.offsetLeft;
var y=e.clientY-cvs.offsetTop;
ctx.clearRect(x,y,10,10)
}
document.onmouseup=function(){
document.onmousedown=null;
document.onmousemove=null;
}
}
</script>
</html>