`

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();
}

 

 

 

.

分享到:
评论

相关推荐

    html5 canvas天空乌云密布下雨动画特效

    SVG可以用于绘制更复杂的图形,比如云朵的细节,因为它支持矢量图形,即使放大也不会失真。开发者可能会用SVG来创建云层模板,然后通过JavaScript动态地在Canvas上绘制。 此外,这个动画特效可能还涉及到交互性,...

    html5 canvas绘制黎明时的天空背景动画特效源码.zip

    在这个压缩包中,“html5 canvas绘制黎明时的天空背景动画特效源码.zip”包含了用于创建一个模拟黎明时分天空背景的Canvas动画效果的代码。 首先,我们需要理解Canvas的基本使用方法。HTML5 Canvas 提供了一个二维...

    HTML5制作的一些云朵效果

    通过`&lt;canvas&gt;`元素,HTML5允许开发者在网页上绘制图形,这就是实现云朵动画的基础。`&lt;canvas&gt;`提供了一块画布,开发者可以使用JavaScript在其上进行像素级别的操作。 CSS3是层叠样式表的最新版本,它极大地扩展了...

    HTML5背景云朵飘飘的效果

    云朵的形状可以通过`arc`或`rect`等Canvas方法绘制,甚至可以加载SVG图形作为云朵的模板。为了增加真实感,还可以添加随机的大小、速度和透明度变化。 在这个案例中,"webgl-clouds(firefox)"可能是指使用WebGL技术...

    html5 canvas云粒子数字时钟动画特效

    在本案例中,云粒子可能就是由许多小圆形粒子组成,它们在Canvas上随机移动,模拟云朵飘动的效果。粒子的位置、速度、颜色等属性可以通过数学公式和随机数生成,以实现更自然的运动轨迹。 4. 动画帧更新: 在...

    HTML5云朵效果

    当鼠标位置改变时,JavaScript会更新云朵的运动状态,使其朝向鼠标的方向飘动。为了实现平滑的动画效果,通常会使用requestAnimationFrame()函数来定期重绘Canvas,这样可以在每一帧之间进行连续的动画效果更新。 ...

    html5 canvas 3D云层动画效果

    在本示例中,“html5 canvas 3D云层动画效果”是一个利用HTML5 Canvas和JavaScript实现的3D云朵飘动的特效,它通过CSS3进行样式控制,提供了一种前卫的用户界面体验。 首先,`index.html`是项目的核心文件,它包含...

    jquery+html5模拟3D云彩飘动效果

    通过Canvas API,开发者可以执行绘制线条、形状、图像,甚至复杂的动画,比如模拟3D云彩飘动的效果。 3. **jQuery**:jQuery是一个广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画制作以及...

    html5+three.js天空乌云密布背景动画特效

    为了实现云层的滚动和飘动效果,开发者可能利用了Three.js的动画框架,如Tween.js或内置的时间线功能,来控制云朵的位置、旋转和缩放。 在“右上角的参数设置面板”,用户可以调整动画的参数,这意味着代码中包含了...

    jQuery超有趣的白云飘动特效插件

    这款插件能够帮助开发者轻松地在网页上绘制出形态各异的云朵,这些云朵会根据设定的速度和方向缓缓移动,仿佛是天空中自由自在的云彩。用户可以根据需求调整云朵的大小、位置、模糊度,以适应不同的设计风格和场景...

    鹏仔3D动态云朵引导页html2源码源码资源下载整理.zip

    在这个场景中,云朵可能是通过算法生成的,结合时间和动画帧来模拟云朵飘动的动态效果。 HTML2作为基础结构,将包含主要的页面布局和内容标记。HTML文件可能包含了canvas元素和其他必要的元素,如div、img等,用于...

    jquery实现天空白云飘动代码.zip

    `&lt;canvas&gt;`允许开发者通过JavaScript绘制图形,实现更复杂的动画效果;而使用`&lt;div&gt;`则更简单,只需调整CSS属性即可。 4. **JavaScript**: JavaScript是实现动态效果的核心语言,负责白云飘动的逻辑。它与jQuery...

    HTML5 Canvas蓝天白云背景特效

    然后,通过JavaScript绘制蓝天背景,这可能涉及到使用`fillStyle`设置填充颜色(例如天空的蓝色),并用`fillRect`绘制整个Canvas。 接着,为了实现白云的动画效果,开发者需要创建多个白云图形,并将它们的属性...

    JavaScript实战项目之七色彩云效果

    通过修改云朵在`canvas`上的坐标,我们可以模拟云朵飘动的效果。此外,为了实现七色变化,JavaScript可以改变云朵的填充颜色,或者利用CSS3的渐变动态调整背景色。 项目中可能包含以下关键步骤: 1. 创建HTML结构...

    H5 Canvas空中花园场景特效

    2. **透明度处理**:使用`globalAlpha`属性可以控制图形的透明度,创建出云朵飘动的轻盈感。透明度的调整使得元素在视觉上有更丰富的层次感。 3. **动画效果**:通过定时器(如`requestAnimationFrame()`)循环更新...

    高仿墨迹天气之动画效果-云,风,雪等

    - **自定义绘制**:如果需要更高级的定制,可以直接使用Canvas绘制线图,控制线条颜色、点的形状和大小,以及添加轴标签和图例。 5. **性能优化**: - **帧率控制**:确保动画的流畅性,避免过度消耗CPU资源,...

    Android高级应用源码-高仿墨迹天气背景动画效果-云,风,雪等.zip

    开发者可以通过`Canvas`提供的方法,如`drawRect()`, `drawBitmap()`, `drawCircle()`等,直接在屏幕上绘制云朵、风和雪花等元素。 3. **Shader**:为了实现云、风、雪等自然效果的动态渲染,可能需要用到`Shader`...

    android高仿墨迹天气背景动画效果-云,风,雪等效果源码.zip

    在onDraw()中,根据时间动态改变云朵的位置,然后使用canvas.drawBitmap()绘制云朵图片。同时,可以使用Handler或者ValueAnimator来控制动画的时间间隔和持续时间,实现云朵的自然飘动。 风的效果可能通过改变其他...

    flash绘画教程2

    你可以为每个云朵状态创建一个关键帧,然后通过补间动画让云朵在这些关键帧之间平滑过渡,实现飘动的效果。 6. **时间轴管理**:在Flash的时间轴上,每一层都可以独立控制动画的播放顺序和速度。通过合理安排云朵...

    html5实现的踩云彩跳高小游戏源码.zip

    开发者可以通过JavaScript控制Canvas上的每一像素,实现动画效果,比如角色跳跃、云朵飘动等。 JavaScript是HTML5游戏的核心驱动力,它负责处理游戏逻辑、用户输入、碰撞检测等。在这个"踩云彩"游戏中,JavaScript...

Global site tag (gtag.js) - Google Analytics