canvas绘制飘动的云朵

<!-- onload事件开始绘制//-->
  <body onLoad="showCloud();">
</body>

/*CSS代码片段*/

html,body{
  background:#049ec4;
  background-repeat:repeat-y;
  margin:0;
  height: 100%;
  overflow:hidden;
  font-family:'microsoft yahei',Arial,sans-serif;
  }

/*Javascript代码片段*/
//创建画布并开始动画
function showCloud(){
//创建画布设置画布属性
    var canvas = document.createElement("canvas");
	canvas.width = document.body.clientWidth;
	canvas.height = document.body.clientHeight;
	canvas.style.position = "absolute";
	canvas.style.zIndex = 0;
	var ctx = canvas.getContext("2d");
    //向body中添加画布
    document.body.appendChild(canvas);
    //设置一个初始X轴位置
    var i = 0;
    //循环更新画布
    window.setInterval(function() {
    //清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //绘制一朵云
    drawCloud(ctx, i, canvas.height * 0.5, canvas.width * 0.25);
    //云朵向右随机移动
    i += Math.random();
    },80)
}


/*渲染单个云朵
context:  canvas.getContext("2d")对象
cx: 云朵X轴位置
cy: 云朵Y轴位置
cw: 云朵宽度
*/
function drawCloud(context, cx, cy, cw) {
//云朵移动范围即画布宽度
var maxWidth = context.canvas.width;
//如果超过边界从头开始绘制
cx = cx % maxWidth;
//云朵高度为宽度的60%
var ch = cw * 0.6;
//开始绘制云朵
context.beginPath();
	context.fillStyle = "white";
    //创建渐变
    var grd = context.createLinearGradient(0, 0, 0, cy);
	grd.addColorStop(0, 'rgba(255,255,255,0.8)');
	grd.addColorStop(1, 'rgba(255,255,255,0.5)');
	context.fillStyle = grd;
	context.fill();
    //在不同位置创建5个圆拼接成云朵现状
    context.arc(cx, cy, cw * 0.19, 0, 360, false);
	context.arc(cx + cw * 0.08, cy - ch * 0.3, cw * 0.11, 0, 360, false);
	context.arc(cx + cw * 0.3, cy - ch * 0.25, cw * 0.25, 0, 360, false);
	context.arc(cx + cw * 0.6, cy, cw * 0.21, 0, 360, false);
	context.arc(cx + cw * 0.3, cy - ch * 0.1, cw * 0.28, 0, 360, false);
	context.closePath();
	context.fill();
}

canvas绘制飘动的云朵

猜你喜欢