运用canvas在指定区域内随机生成一些图形

何妨吟啸且徐行?

于 2024-09-27 09:01:17 发布

阅读量190

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_30327395/article/details/142584338

版权

<!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>
canvas{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<button id="btn">随机生成</button>
<button id="clear">清空</button>
<script>
var btn = document.getElementById("btn");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
btn.onclick = function(){
// 产生随机数
var random = Math.floor(Math.random()*3);
if(random == 0){
console.log("圆形");
}else if(random == 1){
rect();
console.log("矩形");
}else if(random == 2){
console.log("直线");
line();
}

}
// 创建直线的函数
function line(){
context.beginPath();
var x =Math.floor(Math.random()*800);
var y =Math.floor(Math.random()*800);
var x1 =Math.floor(Math.random()*800);
var y1 =Math.floor(Math.random()*800);
context.moveTo(x,y);
context.lineTo(x1,y1);
var width = Math.floor(Math.random()*100);
context.lineWidth = width;
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
var a = Math.random();
context.strokeStyle= "rgba("+r+","+g+","+b+","+a+")";
context.stroke();
context.closePath();
}

// 创建矩形的函数
function rect(){
context.beginPath();
var randrect = random1();
var rectwidth = Math.floor(Math.random()*400);
var rectheight = Math.floor(Math.random()*400);
if(randrect.sf ==0){
context.strokeStyle = randrect.bg;
context.strokeRect(randrect.x,randrect.y,rectwidth,rectheight);
}else{
context.fillStyle = randrect.bg;;
context.fillRect(randrect.x,randrect.y,rectwidth,rectheight)
}
context.closePath();
}

// 封装一个方法随机出来公用数值
function random1(){
// 坐标
var x =Math.floor(Math.random()*800);
var y =Math.floor(Math.random()*800);
// 颜色需要
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
var a = Math.random();
// 是填充的图形还是线性的图形
var sf = Math.floor(Math.random()*2);
// 线的粗细也是公用的
var width = Math.floor(Math.random()*100);

var obj = {
x:x,
y:y,
bg:"rgba("+r+","+g+","+b+","+a+")",
sf:sf,
width:width
}

return obj;
}

// 清空
var clear = document.getElementById("clear");
clear.onclick = function(){
context.clearRect(0,0,800,800);
}
</script>
</body>
</html>