JavaScript Canvas点击生成随机图形教程：HTML/CSS/JS完整实现

JavaScript Canvas点击生成随机图形教程

本文分享了一段使用JavaScript实现点击生成随机图形的完整代码示例，供读者参考学习。

实现点击生成随机图形的功能

最终运行效果如下所示：

JavaScript Canvas点击生成随机图形教程

具体实现依赖于JavaScript语言

核心逻辑主要基于Canvas绘图接口与随机数生成函数来绘制各类几何图形。

构建基础界面与交互逻辑

第一步：构建基础界面

在HTML结构中定义用于显示图形的Canvas区域，并添加两个功能按钮：一个用于触发图形生成，另一个用于清空画布上的所有图形。


<style>
  *{
   margin: 0;
   padding: 0;
  }
  #canvas{
   border: solid 1px red;
   display: block;
   margin: 0 auto;
  }
  #father{
   width: 200px;
   margin:0 auto;
   
  }
  #btn{
   margin-right: 40px;
   cursor: pointer;
  }
  #cle{
   cursor: pointer;
  }
</style>


<body>
 <canvas id="canvas" width="600" height="600"></canvas>
 <div id="father">
  <input type="button" id="btn" value="点击生成">
  <input type="button" id="cle" value="点击清除">
 </div>
</body>

第二步：编写JavaScript逻辑

在JavaScript代码中，分别定义三个核心函数：用于生成随机颜色的函数、点击按钮后随机绘制图形的函数，以及点击按钮后清除屏幕内容的函数。


var canvas=document.getElementById("canvas");
 var context=canvas.getContext("2d");
 var btn=document.getElementById("btn");
 var cle=document.getElementById("cle");

核心绘图算法与颜色生成

实现随机颜色设置逻辑


function color(){
  var r=Math.floor(Math.random()*255);
  var g=Math.floor(Math.random()*255);
  var b=Math.floor(Math.random()*255);
  var a=Math.random();
  var bg="rgba("+r+","+g+","+b+","+a+")";
  return bg;
 }

定义点击生成图形的函数，支持三种图形类型：实心与空心矩形、实心与圆形、以及直线。每种图形的位置和尺寸均通过随机函数确定，并结合Canvas API（如beginPath()和closePath()）完成绘制。


btn.onclick=function(){
  var random=Math.floor(Math.random()*3+1);
  if(random==1){
   var rectr=Math.floor(Math.random()*2);
   var rectx=Math.floor(Math.random()*600);
   var recty=Math.floor(Math.random()*600);
   var rectwidth=Math.floor(Math.random()*200+200);
   var rectheight=Math.floor(Math.random()*200+200);
   if(rectr== 0){
    context.beginPath();
    context.strokeStyle=color();
    context.strokeRect(rectx,recty,rectwidth,rectheight)
    context.closePath();
   }
   else {
    context.beginPath();
    context.fillStyle=color();
    context.fillRect(rectx,recty,rectwidth,rectheight);
    context.closePath();
   }
  }
  else if(random == 2){
   var arcr=Math.floor(Math.random()*2);
   var arcx=Math.floor(Math.random()*600);
   var arcy=Math.floor(Math.random()*600);
   var arcr=Math.floor(Math.random()*300);
   if(arcr==0){
    context.beginPath();
    context.strokeStyle=color();
    context.arc(arcx,arcy,arcr,0,2*Math.PI,false);
    context.stroke();
    context.closePath();
   }
  
   else{
    context.beginPath();
    context.fillStyle=color();
    context.arc(arcx,arcy,arcr,0,2*Math.PI,false);
    context.fill();
    context.closePath();
   }
  }
  else if(random==3){
   var movex=Math.floor(Math.random()*600);
   var movey=Math.floor(Math.random()*600);
   var linex=Math.floor(Math.random()*600);
   var liney=Math.floor(Math.random()*600);
   var linew=Math.floor(Math.random()*20);
   context.beginPath();
   context.strokeStyle=color();
   context.moveTo(movex,movey);
   context.lineTo(linex,liney);
   context.lineWidth=linew;
   context.stroke();
   context.closePath();
  }
}

实现画布清除功能

第三步：实现清除功能

最后定义清除屏幕的按钮事件处理函数。根据Canvas的尺寸，调用context.clearRect(0,0,600,600)方法即可清空画布内容。


cle.onclick=function(){
  context.beginPath();
  context.clearRect(0,0,600,600);
  context.closePath();
 }

至此，点击生成随机图形的功能已完整实现！

以上就是本文的全部内容，希望对读者的学习有所帮助，也欢迎大家继续支持本站。

JavaScript实现点击生成随机图形：Canvas绘图与交互逻辑