<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: -webkit-linear-gradient(top, deepskyblue,aquamarine );
}
#btn{
border:1p solid red;
background-color: aquamarine;
}
</style>
</head>
<body>
<canvas id="cavs" width="1600" height="755"></canvas>
<script>
var canvas=document.getElementById('cavs'); //获取画纸
var ctx=canvas.getContext('2d'); //获取画笔
var cavs=document.getElementById("cavs");
cavs.onclick=function(){
random();
}
function random(){
var x = (parseInt)(Math.random() * 1550);
var y = (parseInt)(Math.random() * 850);
var num = (parseInt)((Math.random()+0.3)*70) ;
var r = (parseInt)(Math.random() * 255);
var g = (parseInt)(Math.random() * 255);
var b = (parseInt)(Math.random() * 255);
var a =Math.random()+0.1;
ctx.beginPath(); //防止之前画好的部分受后面画的影响,开始绘制,进行坐标重置
ctx.arc(x,y,num,0,2*Math.PI,true); //圆路径绘制
ctx.fillStyle = "rgba("+r+","+g+","+b+","+a+")";
ctx.fill();//确认填充
//ctx.strokeStyle="pink"; //绘制画笔的颜色
//ctx.stroke();
ctx.closePath();
}
</script>
</body>
</html>
canvas随机圆
最新推荐文章于 2022-06-29 14:13:13 发布