使用画布Javascript绘制正方形

Posted 2023-03-29

【中文标题】使用画布Javascript绘制正方形

【英文标题】：Drawing square using canvas Javascript

【发布时间】：2018-09-23 06:28:01

【问题描述】：

为分配制作一个随机艺术生成器。我们应该随机弹出正方形，但我不知道要画一个正方形。这就是我目前所拥有的

function drawSquare(canvas, context, color)
    var x= Math.floor(Math.random()*canvas.width);
    var y= Math.floor(Math.random()*canvas.height);
    context.beginPath();
    context.fillStyle = color;
    context.fillRect (x,y, canvas.width, canvas.height)
 

【问题讨论】：

看起来几乎是对的，尽管您不需要 beginPath，因为它只是一个填充而不是描边。您想将矩形的宽度/高度设置得更小，而现在您要使矩形与画布一样大。下一步是调用 drawSquare 来绘制尽可能多的正方形，这样你就可以使用 for 循环。

@Noface 谢谢！所以我应该将 x 和 y 更改为 math.floor(Math.random()*20 );或类似的东西来设置大小？并且 .fillrect (x,y,width,width) 会因为正方形大小相同而起作用吗？

@Noface 就调用它而言，我们应该为你的 for 循环的每次迭代随机选择，如果它绘制一个圆形或一个正方形，它应该随机选择......所以现在在我的我有函数... for (var i=0; i

是的，20 表示 20 像素。并将高度设置为与宽度相同确实会形成一个正方形。您还可以设置相对于屏幕宽度或高度的大小，例如屏幕宽度的 10% 将是 window.innerWidth*0.1 - 这将变成一定数量的像素（取决于屏幕宽度）。是的，调用Math.random() 生成一个介于> 0 和Math.floor。

@Noface 好的最后一个问题，谢谢你是 javascript 新手，所以我很感激......我是否需要在开始我的 if 函数之前调用 Math.random，或者那会是什么时候它被称为，例如我有： var colors = ['red','blue','green'] for (var i=0; i

【参考方案1】：

我不喜欢为人们做作业，但是再次超越技术内容并能够获得创意和艺术是有趣的部分。所以，这是一个你可以玩的随机正方形生成器，你可以从中学习。有一些cmets来解释更多。

const canvas = document.getElementById("canv");
const ctx = canvas.getContext("2d");
const width = window.innerWidth;
const height = window.innerHeight;
const maxWH = Math.max(width, height);

//use resize event listener to change these on window resize...
canvas.width = width;
canvas.height = height;

//to generate random intergers from 0 to 255, for colour channels
function randomInteger(max = 256)
  return Math.floor(Math.random()*max);

//draw n squares at random places and sizes
function makeRandomSquares(n)
  for(let i = 0; i < n; i++)
    const size = Math.random()*(maxWH*0.15);
    //minus half the size from x,y
    //so they can overlap left and top of screen, not just bottom and right.
    const x = Math.random()*width-size/2;
    const y = Math.random()*height-size/2;
    //random rgba colour
    ctx.fillStyle = `rgba($randomInteger(),$randomInteger(),$randomInteger(),$Math.random()*0.4)`;
    ctx.fillRect(x,y,size,size);
  

//initialize with 2 squares
makeRandomSquares(2);
//make 2 more squares each click
document.addEventListener("click", function()
  makeRandomSquares(2);
, false);

html, body 
  margin: 0;
  padding: 0;

canvas 
  width: 100%;
  height: 100%;

<canvas id="canv"></canvas>

【参考方案2】：

这就是你想要的？

function drawSquare(canvas, context, color)
    var x= Math.floor(Math.random()*canvas.width);
    var y= Math.floor(Math.random()*canvas.height);    
    context.fillStyle = color;
    context.fillRect (x,y, canvas.width, canvas.height)
 
 
 let canvas=document.getElementById('canvas');
 drawSquare(canvas,canvas.getContext('2d'),'pink');

<canvas width=300 height=300 id="canvas" ></canvas>

【讨论】：

请记住，由于画布宽度/高度太小，矩形会被截断

【参考方案3】：

如 cmets 中所述，您不需要为实心矩形使用路径。在本例中，我将调用函数 600 毫秒。

编辑：

这些答案都应该作为有用的学习工具。祝你好运！

function randoRect() 
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var color = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);

  function drawSquare(color) 
    var x = Math.floor(Math.random() * canvas.width);
    var y = Math.floor(Math.random() * canvas.height);
    ctx.fillStyle = color;
    ctx.fillRect(x, y, 40, 40);
  

  drawSquare(color);



$('#start').on('click', function() 
  setInterval(randoRect, 600);
)

#start 
  background: coral;
  color: white;
  border: none;
  position: fixed;
  padding: 15px;
  top: 20px;
  left: 20px;
  cursor: pointer;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">START</button>
<canvas id="canvas"  ></canvas>