首先规划程序逻辑
- 2 如何用canvas绘制图形
- 3 怎么实现动画
- 4 雨滴绘制的原理
  - 41 使用原型定义雨滴对象
  - 42 视觉原理动画实现雨滴下落的绘制
- 5 绘制雨滴N个不能同时下落
问题一 Canvas宽高设置出现白边
问题二 Canvas具有默认大小 300px150px
问题三 Canvas自适应页面大小如何实现
问题四雨滴绘制原理
问题五 setIntervalmoveRain100060
问题六一个函数在没有指定调用主体前它的this永远指向window

1. 首先规划程序逻辑

##1.1 设置canvas款到与浏览器相同
1.1.1：获取canvas元素
1.1.2：获取浏览器宽高
1.1.3：为canvas元素设置宽高
1.1.4：当窗口大小变化时，自动调整canvas大小

1.2. 如何用canvas绘制图形

1.2.1 绘制矩形
1.2.2 绘制圆形
1.2.3 绘制雨滴
1.2.4绘制落地后的水花

1.3 怎么实现动画

1.4 雨滴绘制的原理

1.4.1 使用原型定义雨滴对象

1.4.2 视觉原理，动画实现雨滴下落的绘制

1.5 绘制雨滴N个，不能同时下落

问题一 Canvas宽高设置出现白边

原因：canvas是内联元素，默认display:inline; 白边为行间距。
解决方案：display:block;

问题二 Canvas具有默认大小 300px*150px

问题三 Canvas自适应页面大小如何实现？

参考链接
方案一：CSS设置100%

body{margin:0;}
html,body{width:100%;height:100%;
}
#rain{display:block;background-color:black;width:100%;height:100%;margin:0;}

结果：使用也可以实现自适应大小，但是改变页面大小时，雨滴的大小形状会变形。
原因：
将canvas按img理解，canvas样式宽高改变了，但是canvas自身的宽高却不变。当两者的宽高比例不同时，出现内容拉伸。

自适应是指元素的dispaly size缩放，是CSS布局维度（css layout dimension）自适应。而canvas的width/height属性对应的是画布内的coordinate space，不属于css负责.canvas的显示大小可以由css规则指定，但是其内部元素的像素不对应CSS像素或屏幕物理像素进行缩放显示。
方案二：使用JS获取window宽高，为canvas设置
原理：使用样式的宽高比重新设置画布的宽高比。发生重绘。

//1.1 获取canvas元素，只能用idvar can=document.getElementById("rain");
//1.2 浏览器的宽高存放在windows的全局变量var w=window.innerWidth;var h=window.innerHeight;
//1.3 设置canvas宽高can.width=w;can.height=h;
//1.4 当窗口大小变化时，自动调整canvas大小//监控浏览器宽高变化window.onresize=function(){w=window.innerWidth;h=window.innerHeight;//1.3 设置canvas宽高can.width=w;can.height=h;}

问题四雨滴绘制原理

视觉原理：同样大小的矩形，从远处看，亮的（偏白）看起来比暗的更大。
绘制：
方案一：绘制不同透明度的矩形进行拼接。
方案二：对于一种rgb的矩形，覆盖层数不等的一种rgba整体页面。
方案二更加便于实现。

问题五 setInterval(moveRain,1000/60);

1. satInterval不写函数本体，
2. 函数体内不能写setInterval
3. 16ms所有的
4. 在第0秒就执行moveRain，隔16ms再执行一次，
5. 然而此时rainArray还没有内容，因为创建雨滴是相隔200ms创建一次
6. 进而移动函数mobeRain中无操作对象
7. 尽量不用setInterval
8. JS发现此语句，插入到栈中，间隔执行，无论其他函数怎样运行
9. 缺点：(1)丢帧 ，当callback函数运行时间太长超过setInterval间隔时(2)运行主体 window this指向问题

问题六一个函数在没有指定调用主体前，它的this永远指向window。

/*封装框架时，this的指向，上下文，作用域var obj={num:1,add:function(){this.num++;console.log(this.num);/*function(){console.log(this.num);//此处this为window})();//运行obj.add()输出为UNDEFINED)*/(function(){console.log(this.num);}.bind(this))();//运行obj.add()输出为UNDEFINED ;bind(this)之后输出为2),THIS指向}}obj.add();function aaa(){console.log("a"+this);}
function bbb(cb){cb&&cb();console.log("b"+this);
}
bbb.call(obj,aaa);
*/

canvas雨滴绘制总结（三）相关推荐

canvas 雨滴特效
一.雨滴特效需求雨滴从窗口顶部随机下落到达底部将呈现波纹逐渐散开变淡直到消失,雨滴特效随窗口变化自适应二.雨滴实现思路 1. 用面向对象的思维首先创建canvas画布 ,绘制一个雨滴的初始化形状 ...
html绘图环境,HTML_HTML5 在canvas中绘制文本附效果图，一、绘制文本在绘图环境中提 - phpStudy...
HTML5 在canvas中绘制文本附效果图一.绘制文本在绘图环境中提供了两种方法在canvas中绘制文本. strokeText(text,x,y) : 在(x,y)处绘制空心的文本. fill ...
矩形做成翻页的效果html5,HTML5 在canvas中绘制矩形附效果图
一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制 ...
html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...
使用Canvas扩展绘制动态ASP.NET Core Blazor条形图
目录介绍背景使用代码步骤1:创建ASP.NET Core Blazor服务器应用程序运行测试应用程序步骤2:安装软件包步骤3:建立模型类别创建服务类步骤4:将服务添加到Startup ...
Android中使用SurfaceView和Canvas来绘制动画
事实上每一个View中都有Canvas能够用来绘制动画.仅仅须要在这个View中重载onDraw()方法就能够,可是SurfaceView类是一个专门用来制动动画的类. Canvas(中文叫做&quo ...
html5canvas绘制图片源码,HTML5 CANVAS：绘制图片
HTML5 CANVAS:绘制图片通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素 ...
canvas用于绘制视频
canvas相关方法介绍 1.ctx.getImageData(sx, sy, sw, sh):其中sx.sy分别是起点的横纵坐标,sw和sh分别为将要提取的数据对应的矩形图像的宽度和高度:其返回值是 ...
QML ＜2＞ Canvas 自定义绘制网易云歌单封面实现
QML <2> Canvas 自定义绘制网易云歌单封面实现前言基于QML 实现网易云歌单封面,参考图如下: 实现图如下: 一.背景图最底层为Rectangle ,图片用Anima ...

canvas雨滴绘制总结（三）

1. 首先规划程序逻辑

1.2. 如何用canvas绘制图形

1.3 怎么实现动画

1.4 雨滴绘制的原理

1.4.1 使用原型定义雨滴对象

1.4.2 视觉原理，动画实现雨滴下落的绘制

1.5 绘制雨滴N个，不能同时下落

问题一 Canvas宽高设置出现白边

问题二 Canvas具有默认大小 300px*150px

问题三 Canvas自适应页面大小如何实现？

问题四雨滴绘制原理

问题五 setInterval(moveRain,1000/60);

问题六一个函数在没有指定调用主体前，它的this永远指向window。

canvas雨滴绘制总结（三）相关推荐

最新文章

热门文章

canvas雨滴绘制总结（三）

1. 首先规划程序逻辑

1.2. 如何用canvas绘制图形

1.3 怎么实现动画

1.4 雨滴绘制的原理

1.4.1 使用原型定义雨滴对象

1.4.2 视觉原理，动画实现雨滴下落的绘制

1.5 绘制雨滴N个，不能同时下落

问题一 Canvas宽高设置出现白边

问题二 Canvas具有默认大小 300px*150px

问题三 Canvas自适应页面大小如何实现？

问题四 雨滴绘制原理

问题五 setInterval(moveRain,1000/60);

问题六 一个函数在没有指定调用主体前，它的this永远指向window。

canvas雨滴绘制总结（三）相关推荐

最新文章

热门文章

问题四雨滴绘制原理

问题六一个函数在没有指定调用主体前，它的this永远指向window。