Next »
1051/1956
« Previous

Paint a cloud by using bezier curve in JavaScript

Description

The following code shows how to paint a cloud by using bezier curve.

Example


<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function(){<!--from   ww w . j a  v  a2 s .  c  o  m-->
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var startX = 200;
var startY = 100;

// draw cloud shape
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(startX - 40, startY + 10, startX - 20, startY + 180, startX + 60, startY + 70);
context.bezierCurveTo(startX + 100, startY + 100, startX + 150, startY + 100, startX + 150, startY + 70);
context.bezierCurveTo(startX + 280, startY + 70, startX + 230, startY + 40, startX + 210, startY + 20);
context.bezierCurveTo(startX + 360, startY - 40, startX + 210, startY - 50, startX + 160, startY - 30);
context.bezierCurveTo(startX + 150, startY - 75, startX + 80, startY - 60, startX + 70, startY - 30);
context.bezierCurveTo(startX + 30, startY - 75, startX - 10, startY - 60, startX, startY);
context.closePath();

// add a radial gradient
var grdCenterX = 250;
var grdCenterY = 80;
var grd = context.createRadialGradient(grdCenterX, grdCenterY, 10, grdCenterX, grdCenterY, 200);
grd.addColorStop(0, "#eee");
grd.addColorStop(1, "#aaa");
context.fillStyle = grd;
context.fill();

// set the line width and stroke color
context.lineWidth = 5;
context.strokeStyle = "#333";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
</body>
</html>

Click to view the demo

The code above generates the following result.

Paint a cloud by using bezier curve in JavaScript
Next »
« Previous