Canvas draw fluttering clouds
<!-- onload event starts drawing //--> <body onLoad="showCloud();"> </body>
/*CSS code snippets*/
html,body{
background:#049ec4;
background-repeat:repeat-y;
margin:0;
height: 100%;
overflow:hidden;
font-family:'microsoft yahei',Arial,sans-serif;
}
/*Javascript code snippet*/
//create canvas and start animation
function showCloud(){
//Create canvas and set canvas properties
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");
//Add canvas to body
document.body.appendChild(canvas);
//Set an initial X-axis position
var i = 0;
//loop to update the canvas
window.setInterval(function() {
// clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// draw a cloud
drawCloud(ctx, i, canvas.height * 0.5, canvas.width * 0.25);
//The clouds move randomly to the right
i += Math.random();
},80)
}
/* render a single cloud
context: canvas.getContext("2d") object
cx: Cloud X-axis position
cy: Cloud Y-axis position
cw: cloud width
*/
function drawCloud(context, cx, cy, cw) {
//The cloud movement range is the width of the canvas
var maxWidth = context.canvas.width;
// If the border is exceeded, draw from the beginning
cx = cx % maxWidth;
//The height of the cloud is 60% of the width
var ch = cw * 0.6;
//Start drawing clouds
context.beginPath();
context.fillStyle = "white";
//create gradient
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();
//Create 5 circles at different positions and splicing them into clouds
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();
}
.