canvas绘制飘动的云朵
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();
}.
相关推荐
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
jinxiutong 2020-05-10
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06
northwindx 2020-04-25