html 直线变曲线,2.4 玩转贝塞尔曲线：绘制云朵 - HTML5 Canvas 实战

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

图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()方法来应用该渐变。