2.4 玩转贝塞尔曲线:绘制云朵
优质
小牛编辑
147浏览
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()方法来应用该渐变。