2.4 玩转贝塞尔曲线：绘制云朵

优质

小牛编辑

141浏览

2023-12-01

本节，我们将通过连接一系列贝塞尔曲线的子路径绘制一朵蓬松的云，来学习如何绘制自定义图形。

绘制步骤

按照以下步骤，在画布的中央绘制一朵蓬松的云：

1. 定义2D画布上下文：

window.onload  = function(){
  var canvas  = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");

2. 通过连接六条贝塞尔曲线绘制云朵：

  var startX  =  200;
  var startY  =  100;
  // draw cloud shape绘制云状图形
  context.beginPath();
  context.moveTo(startX, startY);
  context.bezierCurveTo(startX  -  40, startY  +  20, startX  -  40, startY  +  70, startX  +  60, startY  +  70);
  context.bezierCurveTo(startX  +  80, startY  +  100, startX  +  150, startY  +  100, startX  +  170, startY  +  70);
  context.bezierCurveTo(startX  +  250, startY  +  70, startX  +  250, startY  +  40, startX  +  220, startY  +  20); 
  context.bezierCurveTo(startX  +  260, startY  -  40, startX  +  200, startY  -  50, startX  +  170, startY  -  30); 
  context.bezierCurveTo(startX  +  150, startY  -  75, startX  +  80, startY  -  60, startX  +  80, startY  -  30);
  context.bezierCurveTo(startX  +  30, startY  -  75, startX  -  20, startY  -  60, startX, startY);
  context.closePath();

3. 使用createRadialGradient()方法定义径向渐变，并用该渐变填充图形：

  //添加一个径向渐变
  var grdCenterX  =  260;
  var grdCenterY  =  80;
  var grd  = context.createRadialGradient(grdCenterX, grdCenterY, 10, grdCenterX, grdCenterY,  200);
  grd.addColorStop(0, "#8ED6FF");  //浅蓝色
  grd.addColorStop(1, "#004CB3");  //深蓝色
  context.fillStyle  = grd;
  context.fill();

4. 设置线条宽度并对云朵进行描边：

  //设置线宽和描边颜色
  context.lineWidth  =  5;
  context.strokeStyle  = "#0000ff"; 
  context.stroke();
};

5. 在HTML文档的body部分嵌入canvas标签：

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

要使用HTML5的画布API绘制一朵蓬松的云，我们可以连接若干条贝塞尔曲线来构成云朵图形的边界。为了创建球状表面的错觉，我们可以使用createRadialGradient()方法创建一个径向渐变，使用addColorStop()方法设置不同偏移点的颜色，通过fillStyle属性把渐变设置为填充色，然后使用fill()方法来应用该渐变。