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),会忽略之前的变换,从起始状态开始改变.
随机推荐
- CSS：用Less实现栅格系统
CSS:用Less实现栅格系统 背景 公司一直没有专职的前端和美工,Javascript相对来说我熟悉一点,CSS+HTML有四五年没有搞过了,最近要学一下,招聘或和美工配合的时候会有用处. 收集的资 ...
- Android Jni引用第三方库
在jni下新建文件夹(jniLib)用来存放第三方so库: 将so拷贝到jniLib下,新建一个Android.mk文件: LOCAL_PATH:= $(call my-dir) include $( ...
- PHP之语言基础01 By ACReaper
1.PHP中的变量是不需要声明类型的,由$标识变量,变量的命名规则也是字母或者下划线开头,接着任意字符或者下划线. $PI = 3.14; $radius = 5; $cir = $PI * 2 * ...
- [Android笔记1]Activity+Layout+Button
线性布局(LinearLayout)是指view对象在父view中可按水平或垂直方向线性排列. 相对布局(RelativeLayout)是指view对象的排列依赖于各对象之间的相对位置. 下面是展示两 ...
- hdu 1253 胜利大逃亡（BFS）
题目链接:点击链接 三维的BFS,刚开始一直超内存,超无语...... 改了n多次终于AC了 #include <iostream> #include <stdio.h> # ...
- mysql基础：数据库的创建，增删改查
=============查看数据库========================== 使用SHOW语句找出服务器上当前存在什么数据库: mysql> SHOW DATABASES; +--- ...
- 用Arduino做一个可视化网络威胁级别指示器！
在当今世界,网络监控器是非常重要的.互联网是个可怕的地方.人们已经采取措施以提高警戒----他们安装了入侵检测系统(IDS)比如SNORT. 通过把可视化部分从电脑中移出来,我们想让它更容易去观察.一 ...
- Android应用--简、美音乐播放器获取专辑图片（自定义列表适配器）
Android应用--简.美音乐播放器获取专辑图片(自定义列表适配器) 2013年7月3日简.美音乐播放器开发 第二阶段已增加功能: 1.歌词滚动显示 2.来电监听 3.音量控制 4.左右滑动切换歌词 ...
- java.lang.IllegalArgumentException: Wrong FS ...异常的解决
配置完Hbase后,启动,JPS发现少了HMaster这个进程.查看了一下日志如下: java.lang.IllegalArgumentException: Wrong FS: hdfs://192. ...
- jprofiler8使用小贴士
说明:本文的小贴士是针对jprofiler8的,其他版本上可能有不适用的地方 贴士一:使用jpenable监控,无需增加jvm参数和重启 贴士一:使用jpenable监控,无需增加jvm参数和重启 j ...