html5 云朵飘动效果,canvas作图飘动的云朵

canvas绘制飘动的云朵

/*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