<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas 绘制云团</title>
<script type="text/javascript">
window.onload = function() {
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
var startX = 200;
var startY = 100;
//绘制云形
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();
//填充渐变
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();
context.lineWidth=5;
context.strokeStyle="#0000ff";
context.stroke();
}
</script>
</head>
<body >
<canvas id="myCanvas" width="600" height="250" ></canvas>
</body>
</html>
显示效果如下：
实例来自网络。传送门：http://demo.cnmsdn.com/demo46.html