如何将sketch.js粒子效果中的圆形改为正方形？

嘿，我来帮你搞定这个问题！你之前的尝试没成功，核心原因是只改了变量名，却没替换掉绘制圆形的核心代码——原来的粒子用ctx.arc()画圆，不管你把radius改成啥，只要这个方法没变，粒子就还是圆形。下面是具体的修改步骤和完整代码：

关键修改点 #

• 替换绘制逻辑：把draw方法里的ctx.arc()（绘制圆形）换成ctx.fillRect()（绘制矩形）
• 调整坐标定位：fillRect是从左上角开始绘制，而原粒子基于中心坐标(x,y)，所以要把左上角坐标计算为x - 边长/2、y - 边长/2，保证正方形和原圆形的中心完全对齐
• 统一尺寸变量：将radius改为size（代表正方形边长），让代码逻辑更直观（如果不想改变量名，也可以继续用radius，把它当作正方形的边长即可）

修改后的完整代码 #

JavaScript部分

function Particle( x, y, size ) { // 将参数radius改为size
  this.init( x, y, size );
}
Particle.prototype = {
  init: function( x, y, size ) {
    this.alive = true;
    this.size = size || 10; // 用size表示正方形的边长
    this.wander = 0.15;
    this.theta = random( TWO_PI );
    this.drag = 0.92;
    this.color = '#fff';
    this.x = x || 0.0;
    this.y = y || 0.0;
    this.vx = 0.0;
    this.vy = 0.0;
  },
  move: function() {
    this.x += this.vx;
    this.y += this.vy;
    this.vx *= this.drag;
    this.vy *= this.drag;
    this.theta += random( -0.5, 0.5 ) * this.wander;
    this.vx += sin( this.theta ) * 0.1;
    this.vy += cos( this.theta ) * 0.1;
    this.size *= 0.96; // 按比例缩小正方形边长
    this.alive = this.size > 0.5; // 根据边长判断粒子是否存活
  },
  draw: function( ctx ) {
    ctx.beginPath();
    // 替换arc为fillRect，计算正方形左上角坐标以保证中心对齐
    ctx.fillRect(this.x - this.size/2, this.y - this.size/2, this.size, this.size);
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};

// ----------------------------------------
// Example
// ----------------------------------------
var MAX_PARTICLES = 280;
var COLOURS = [ '#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423' ];
var particles = [];
var pool = [];

var demo = Sketch.create({ container: document.getElementById( 'container' ) });

demo.setup = function() {
  // Set off some initial particles.
  var i, x, y;
  for ( i = 0; i < 20; i++ ) {
    x = ( demo.width * 0.5 ) + random( -100, 100 );
    y = ( demo.height * 0.5 ) + random( -100, 100 );
    demo.spawn( x, y );
  }
};

demo.spawn = function( x, y ) {
  if ( particles.length >= MAX_PARTICLES ) pool.push( particles.shift() );

  particle = pool.length ? pool.pop() : new Particle();
  particle.init( x, y, random( 5, 40 ) ); // 传入的是正方形边长
  particle.wander = random( 0.5, 2.0 );
  particle.color = random( COLOURS );
  particle.drag = random( 0.9, 0.99 );

  theta = random( TWO_PI );
  force = random( 2, 8 );
  particle.vx = sin( theta ) * force;
  particle.vy = cos( theta ) * force;

  particles.push( particle );
}

demo.update = function() {
  var i, particle;
  for ( i = particles.length - 1; i >= 0; i-- ) {
    particle = particles[i];
    if ( particle.alive ) particle.move();
    else pool.push( particles.splice( i, 1 )[0] );
  }
};

demo.draw = function() {
  demo.globalCompositeOperation = 'lighter';
  for ( var i = particles.length - 1; i >= 0; i-- ) {
    particles[i].draw( demo );
  }
};

demo.mousemove = function() {
  var particle, theta, force, touch, max, i, j, n;
  for ( i = 0, n = demo.touches.length; i < n; i++ ) {
    touch = demo.touches[i], max = random( 1, 4 );
    for ( j = 0; j < max; j++ ) demo.spawn( touch.x, touch.y );
  }
};

CSS部分（无需修改）

html, body {
  font-family: 'Play', sans-serif;
  background: #2b2b2b;
  margin: 0;
}

#info {
  position: absolute;
  left: 10px;
  top: 10px;
}

#info {
  background: rgba(0,0,0,0.8);
  padding: 12px 10px;
  margin-bottom: 1px;
  color: #fff;
}

#info h1 {
  line-height: 22px;
  font-weight: 300;
  font-size: 18px;
  margin: 0;
}

#info h2 {
  line-height: 14px;
  font-weight: 300;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  margin: 0 0 6px 0;
}

#info a {
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,0.2);
  margin-right: 4px;
  line-height: 20px;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
}

#info a:hover {
  border-bottom: 1px dotted rgba(255,255,255,0.6);
  color: rgba(255,255,255,1.0);
}

HTML部分（无需修改）

<script src="https://rawgithub.com/soulwire/sketch.js/v1.0/js/sketch.min.js"></script>

<article id="info">
  <header>
    <h1><strong>sketch.js</strong> demo</h1>
    <h2>Spawn particles with your mouse</h2>
  </header>
  <a href="https://github.com/soulwire/sketch.js/zipball/master">Download</a>
  <a href="https://github.com/soulwire/sketch.js">View on Github</a>
</article>

<div id="container"></div>

修改后运行代码，你就能看到原来的圆形粒子变成正方形了，同时保留了原有的运动、缩放和颜色随机效果。

内容的提问来源于stack exchange，提问作者Abdul Samad