`
genius_45
  • 浏览: 58031 次
  • 性别: Icon_minigender_1
  • 来自: 威海
社区版块
存档分类
最新评论

初学canvas,模仿google(let it snow)遇到问题

阅读更多
先贴出代码


 function Snow(x, y, s){
		this.x = x;
		this.y = y;
		this.s = s;
	    }
	    Snow.prototype.draw = function(ctx, canvas){
		ctx.save();
		    var imageObj = new Image();
		    var x = this.x;
		    var y = this.y;
		    var s = this.s;
		    imageObj.onload = function(){
			ctx.drawImage(imageObj, x, y, s, s);
		    };
		    imageObj.src = "snow.png";
		ctx.restore();
		if(this.y < 600){
		    this.y += 6;
		    if(Math.random() < 0.3){
			if(Math.random() > 0.3){
			    this.x += Math.random()*2;
			}else{
			    this.x -= Math.random()*2;
			}
		    }
		    
		}else{
		    snowCanvas.remove(this);
		}
	    }
	    function snowDown(){
		snowCanvas.add(new Snow(Math.random()*document.body.clientWidth-100, 0, Math.random() * 30)).play(150);
	    }

	    setInterval(snowDown,500);




使用得是  gury这个框架.
能展示出雪花从天降落得效果,但是总是闪烁,显得不连贯...请问各位高人..怎么解决这种问题
分享到:
评论
1 楼 qiannancy 2011-12-30  
19和20行是不是多写了一行啊?

相关推荐

    html5 canvas模仿flash的简单动画banner Demo

    这个“html5 canvas模仿flash的简单动画banner Demo”就是利用Canvas API来实现类似Flash的动态广告效果的一个实例。下面将详细探讨相关的知识点。 1. HTML5 Canvas API: - `canvas`元素:HTML5中的`&lt;canvas&gt;`...

    利用Canvas模仿百度贴吧客户端loading小球的方法示例

    主要给大家介绍了关于利用Canvas模仿百度贴吧客户端loading小球的实现方法,实现后的相关非常相似,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考价值,需要的朋友们下面跟着小编来一起学习学习吧...

    html5 js+canvas 频谱动画代码 音频条效果

    Canvas是一个基于矢量图形的画布,允许开发者通过JavaScript来绘制动态或静态图像。在这个项目中,我们关注的是如何利用HTML5的Canvas和JavaScript来创建一个音频频谱动画,展示音频播放时的实时频谱效果。 首先,`...

    html2canvas将HTML内容写入Canvas生成图片 uniapp

    - 最后,通过Canvas的toDataURL方法,可以将绘制好的Canvas内容转换为data URL,即可以直接使用的图片URL。 2. **uniAPP集成html2canvas**: - 在uniAPP项目中,可以通过npm或yarn安装html2canvas库,然后在...

    html2canvas案例解决模糊不清及滚动下拉问题(已测试,可直接应用到项目中)

    在实际使用中,HTML2canvas可能会遇到一些常见的问题,如图像质量模糊不清以及处理页面滚动时的问题。本文将详细介绍如何解决这些问题,并提供一个已经测试过的案例,可以直接应用到你的项目中。 **一、模糊不清的...

    canvas light.rar

    "canvas light"可能是指这个压缩包中的内容专注于Canvas的基础功能或轻量级应用,可能包含一些简化版的库或者教程,帮助初学者快速理解并上手Canvas。通过学习这些资源,开发者可以掌握如何在网页上创建动态图形,...

    Let-It-Snow:您网页的简单像素下雪

    "Let-It-Snow" 是一个使用 JavaScript 实现的网页特效项目,旨在为网页添加一个冬季特色的元素——模拟像素级别的雪花飘落效果。这个项目可以让访问者在浏览网页时感受到仿佛置身于雪景之中,增添了一份温馨的节日...

    解决htmlcanvas手机无法截图或者截图不全的问题

    然而,在实际应用中,尤其是在手机上,可能会遇到无法截图或者截图不全的问题。本文将深入探讨这些问题的原因以及解决方案。 首先,让我们了解为何会出现这些问题。HTMLCanvas截图不全或无法截图,可能有以下几个...

    canvas截屏

    本篇文章将深入探讨如何解决在canvas截屏过程中遇到的模糊、图片缺失和位置不准确等问题。 1. **模糊问题**: - 原因:canvas元素默认的分辨率(DPI)与屏幕设备像素比(devicePixelRatio)不匹配,导致截图像素化...

    canvas绘制音频波形-纯js自写

    let canvas = document.getElementById('waveform'); let ctx = canvas.getContext('2d'); ``` 为了美观,我们可以设置一些样式,比如背景色和线条颜色: ```javascript ctx.fillStyle = '#F0F0F0'; ctx.fillRect...

    谷歌吉他代码仿写Canvas版

    【谷歌吉他代码仿写Canvas版】是一个基于HTML5 Canvas元素实现的交互式应用程序,它旨在模仿谷歌搜索引擎在特定日期展示的“吉他”彩蛋。在这个彩蛋中,用户可以在搜索框下方的虚拟吉他上点击或滑动鼠标,模拟弹奏...

    html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

    html2canvas支持各种浏览器,包括Firefox 3.5+、Google Chrome、Opera的更新版本以及IE9以上的浏览器。 在使用html2canvas之前,先了解一下其基本属性和使用方法是十分必要的。html2canvas接受一个HTML元素作为参数...

    [模仿]canvas视频拼图

    好久以前的了,那时html5刚出来不久吧,国外有人做了个用canvas来拼视频的游戏,觉得挺好玩的,就模仿了一下(模仿也是好久以前的事了)

    canvas绘图任意矩形、多边形

    本教程将深入探讨如何利用Canvas API实现鼠标拖动绘制任意矩形和多边形的功能。 首先,我们需要在HTML文件中创建一个`&lt;canvas&gt;`元素,并设置其id以便于在JavaScript中引用。例如: ```html &lt;!DOCTYPE html&gt; ...

    html2canvas-rc4.js和html2canvas.min.js

    然而,像所有软件一样,HTML2canvas也可能会遇到兼容性问题,尤其是在不同的操作系统和浏览器上。 标题中的"html2canvas-rc4.js和html2canvas.min.js"指的是HTML2canvas的两个不同版本。"rc4"通常代表Release ...

    canvas自定义编辑器

    在IT领域,Canvas自定义编辑器是一个非常关键的工具,特别是在网页开发中,它允许开发者创建高度交互式的、基于浏览器的多媒体编辑环境。Canvas是HTML5的一个重要元素,提供了在网页上绘制图形的能力,而自定义编辑...

    ec-canvas 实现echart图表显示

    ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...

    canvas实现遮罩效果

    这个效果不仅能够为网页增添视觉吸引力,而且展示了Canvas和CSS的强大结合。以下是对实现这一效果所需技术的详细解释。 首先,让我们了解什么是Canvas。Canvas是HTML5引入的一个绘图元素,允许开发者在网页上动态...

    Qt Quick之Canvas(画布),适合Qt初学者

    ### Qt Quick之Canvas(画布)详解 #### 一、Canvas概述 在Qt Quick中,Canvas是一个极其重要的组件,主要用于创建...无论是对于Qt初学者还是经验丰富的开发人员来说,掌握Canvas都是构建高质量应用程序的关键之一。

    html2canvas-0.4.1

    这些例子对于初学者来说是非常宝贵的参考资料,能快速上手并理解html2canvas的基本用法。 其次,“html2canvas-0.4.1.zip”是该版本的源码包,解压后我们可以查看源代码,进一步学习其内部实现机制。开发者们可以...

Global site tag (gtag.js) - Google Analytics