canvas绘图基础及基于粒子系统的雪花飘落
canvas是html中的一个元素，可以通过js操控绘图！
可以绘制各种图形，各种填充样式！
绘制时可以进行旋转，缩放，平移，但并不是很灵活！
有一对比较好用的方法是save restore！
save 与 restore的作用并不是保存图像，而是恢复到之前的偏移，旋转，缩放状态！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<script>
//全局变量
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
init();
function init(){
document.body.appendChild(canvas);
canvas.width = canvasWidth;
canvas.height = canvasHeight;
canvas.setAttribute('style','background:black;border:5px solid red');//设置边框
} /**绘制矩形快
* in_fileStyle 颜色;
* in_x,in_y 左上角坐标
* in_width,in_height 宽度和高度
*/
function drawRect(in_fileStyle,in_x,in_y,in_width,in_height){
canvasContext.fillStyle=in_fileStyle;
canvasContext.fillRect(in_x,in_y,in_width,in_height);
} /**绘制线条
* in_fileStyle 颜色;
* in_x1,in_y1 起点坐标;
* in_x2,in_y2 终点坐标;
* in_size 线条宽度
*/
function drawLine(in_fileStyle,in_x1,in_y1,in_x2,in_y2,in_size){
canvasContext.beginPath();//重置当前路径 或 开始一条路径
canvasContext.strokeStyle=in_fileStyle;
canvasContext.lineWidth=in_size;
canvasContext.moveTo(in_x1,in_y1);
canvasContext.lineTo(in_x2,in_y2);
canvasContext.stroke();//绘制
}
/**绘制圆圈或实心圆
* in_fileStyle 颜色;
* in_x,in_y 圆心坐标
* in_r 半径
* in_startAngle,in_endAngle 起始角度，结束角度
* in_size 宽度
*/
function drawCircle(in_fileStyle,in_x,in_y,in_r,in_startAngle,in_endAngle,in_size){
canvasContext.beginPath();
canvasContext.strokeStyle=in_fileStyle;
canvasContext.lineWidth=in_size;
canvasContext.arc(in_x,in_y,in_r,in_startAngle,in_endAngle);
canvasContext.stroke();//绘制
}
/**绘制文字
* in_fileStyle 颜色;
* in_x,in_y 左下角坐标
* in_size 大小
* in_fontType 字体
* in_isSolid 是否填充 true or false
* in_text 内容
* in_lineSize 线条宽度
**/
function drawText(in_fileStyle,in_x,in_y,in_size,in_fontType,in_isSolid,in_text,in_lineSize){
canvasContext.strokeStyle=in_fileStyle;
canvasContext.fillStyle=in_fileStyle;
canvasContext.font=in_size + "px " + in_fontType;
if(in_isSolid==true){
canvasContext.fillText(in_text,in_x,in_y);
}else{
canvasContext.lineWidth=in_lineSize;
canvasContext.strokeText(in_text,in_x,in_y);
}
} /**
* 绘制图像,目前此函数是异步绘制，对图层次序不能控制
*/
function drawImge(in_url,in_x,in_y,in_width,in_height){
var stop = false;
var img=new Image();
img.src=in_url;
img.onload = function(){
canvasContext.drawImage(img,in_x,in_y,in_width,in_height);
};
}
/*drawRect("rgba(255,0,0,1)",30,30,720,700);
drawLine("#FF0000",10,10,720,400,13);
drawCircle("#00F0F0",300,300,50,0,2*Math.PI,100);
drawText("#00F0F0",400,500,100,"Arial",false,"HELLO",4);
drawImge("imges/snow.png",0,0,200,200);*/ //随机产生雪花
var snows=[]; //雪花数组
function productSnow(){
// clear the canvas
canvasContext.fillStyle = "rgba(0,0,0,1)";
canvasContext.fillRect(0,0, canvasWidth, canvasHeight);
var snow = new oneSnow(Math.random()*canvasWidth, Math.random()*canvasHeight*0.3,100);
snows.push(snow);
if(snows.length > 100){ //只保留二十个雪花
snows.shift(); //删除第一个雪花
}
//绘制数组中的每一个雪花
for(var i=0;i<snows.length;i++){
snows[i].showSnow().moveToDown();
}
}
//定义一个雪花
function oneSnow(positionX,positionY,snowSize){
this.x=positionX;
this.y=positionY;
this.size=snowSize; //向下运动 y坐标大
this.moveToDown=function(){this.y=this.y+5}
//显示
this.showSnow = function(){
drawImge("imges/snow.png",this.x, this.y,this.size,this.size);
//drawCircle("#00F0F0",this.x,this.y,10,0,2*Math.PI,20);
return this;
}
}
setInterval(productSnow,1000/150);//每个1/3秒调用一次productSnow函数
</script>
</body>
</html>
雪花
canvas绘图基础及基于粒子系统的雪花飘落的更多相关文章
- Android中Canvas绘图基础详解（附源码下载） (转)
Android中Canvas绘图基础详解(附源码下载) 原文链接 http://blog.csdn.net/iispring/article/details/49770651 AndroidCa ...
- canvas绘图基础
<canvas>元素是HTML5中的绘图元素,通过定义一个画布区域,然后使用javascript动态地在这个区域里面绘制图形,对于2D和3D图形都可以绘制,我们将其分成2D上下文和WebG ...
- Canvas绘图基础（一）
简单图形绘制 矩形:描边与填充 Canvas的API提供了三个方法,分别用于矩形的清除.描边及填充 clearRect(double x, double y, double w, double h) ...
- HTML5自学笔记[ 11 ]canvas绘图基础1
html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...
- HTML5 canvas绘图基础（电子名片生成器源码）
创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...
- HTML5自学笔记[ 17 ]canvas绘图基础4
绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...
- HTML5自学笔记[ 16 ]canvas绘图基础3
canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...
- HTML5自学笔记[ 14 ]canvas绘图基础2
canvas绘制路径不仅可以绘制直线和多边形,还提供了绘制曲线的方法,利用这些方法可以画出多种曲线效果. 方法1:arc(x,y,r,起始弧度,结束弧度,绘制方向);其中(x,y)为圆心坐标,r为半径 ...
- HTML5自学笔记[ 23 ]canvas绘图基础7
变换矩阵: transform(a,b,c,d,e,f),多次使用该函数,效果是多次状态改变的累加: setTransform(a,b,c,d,e,f),会忽略之前的变换,从起始状态开始改变.
随机推荐
- EventBus实现 - 发布订阅 - XML加载
EventBus实现 - 发布订阅 - XML加载 受到CQRS的影响,写了个EventBus,能实现发布订阅模式执行event,在DDD模型中,可以使用如下代码触发事件: EventBus bus ...
- 代码契约CodeContract（八）
代码契约(Code Contract):它并不是语言本身的新功能,而是一些额外的工具,帮助人们控制代码边界. 代码契约之于C#,就相当于诗词歌赋之于语言. --- C# in Depth 一,概述 1 ...
- Hibernate3.0中的session.find()问题
我被Session.find()的方法困扰了好几天,今天才看到新的Hibernate里没有了Session.find()方法. 现在转载在此,方便你我. 查询性能往往是系统性能表现的一个重要方面,查询 ...
- Oracle笔记（六） 多表查询
最近看了李兴华的oracle视频,这是网上别人做的笔记非常细致,分享给大家,第六篇 原创地址:http://www.cnblogs.com/mchina/archive/2012/09/07/2651 ...
- android开发之res下的menu (xml+代码的形式)
转载请注明出处:http://blog.csdn.net/fth826595345/article/details/9199393 先来看Menu XML文件如何编写: <?xml versi ...
- jvm实战-基本类型占多少内存
jvm内存占用模型 对象的内存结构 对象头 Header 包含两部分数据Mark Word和Kclass: Mark Word:存储对象自身的运行时数据,如hashCode.GC分代年龄.锁状态标志. ...
- <meta>标签的作用
<META> 是放于 <HEAD> 与 </HEAD>之间的标记,功用与变化等对,所以我公式化地介绍. <meta name="Descriptio ...
- Python_day1 基础语法
1.基础语法变量: 在左侧自定义输入变量名,右侧可以输入任意类型赋值给左侧,如需制定类型,可以强转name = Jason, age = int(24) provience = ['beijing', ...
- CodeForces 635C XOR Equation
位运算. 又涨姿势了:$a + b = (aXORb) + 2*(aANDb)$,$ (aXORb)$是不进位的部分,$2*(aANDb)$为进位之后的部分,相加就是$a + b$. 知道了这个转换, ...
- Java中修饰符
下面这张图应该大家都见过,根据图表来记忆最好理解 范围 private friendly(默认) protected public 当前类 √ √ √ √ 当前包中的类 √ √ √ 当前包中的类, ...