本节，我们将通过连接一系列贝塞尔曲线的子路径绘制一朵蓬松的云，来学习如何绘制自定义图形。
图2-4 绘制云朵
绘制步骤
按照以下步骤，在画布的中央绘制一朵蓬松的云：
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标签：
工作原理
要使用HTML5的画布API绘制一朵蓬松的云，我们可以连接若干条贝塞尔曲线来构成云朵图形的边界。为了创建球状表面的错觉，我们可以使用createRadialGradient()方法创建一个径向渐变，使用addColorStop()方法设置不同偏移点的颜色，通过fillStyle属性把渐变设置为填充色，然后使用fill()方法来应用该渐变。
