<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#Mycanvas {
border:1px solid #000;
margin:0 auto;
}
</style>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid #000000;" ></canvas>
<script>
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
var img = new Image();
img.src = "images/img0.jpg"; //完整图片地址
var str = "images/img"; //图片地址前缀
var nums = "0000000000112233445566778"; //控制图片出现的概率,此处 图片0出现的概率为2/5,图片1出现的概率为1/25,以此类推,可根据自己的需求修改出现概率及图片
var num = nums.charAt(parseInt(Math.random()*25)); //随机数生成出现的图片数字 charAt返回制定位置字符 parseInt返回整数 Math.random 返回0-1的随机数
var jpg = ".jpg"; //图片地址的后缀
c.style.backgroundImage = 'url("'+str+num+jpg+'")'; //设置画布背景为随机生成的图片地址
c.style.width = "320px";
c.style.height = "160px";
context.fillStyle = "#ccc"; //填充色
context.globalCompositeOperation = "destination-over"; //与destination-out实现擦除效果
context.beginPath(); //开始绘制
context.fillRect(0,0,320,160); //绘制一个矩形
context.closePath();
c.onmousemove = function(e)
{
//获取鼠标位置
var x = e.pageX - c.offsetLeft; //pageX鼠标位置 文档边缘
var y = e.pageY - c.offsetTop;
context.globalCompositeOperation = "destination-out"; //将一部份变为out 而不是全部 out部分进行显示
context.beginPath();
context.arc(x,y,15,0,2*Math.PI,true); //绘制园.之前讲过了
context.fill(); //进行填充
context.closePath();
}
</script>
</body>
</html>
从零开始的canvas 刮刮乐
猜你喜欢
转载自blog.csdn.net/qq_38674970/article/details/82818103
今日推荐
周排行