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),会忽略之前的变换,从起始状态开始改变.
随机推荐
- 对C# 中Readonly的再认识
C#中有两种常量类型,分别为readonly(运行时常量)与const(编译时常量),本文将就这两种类型的不同特性进行比较并说明各自的适用场景. 工作原理 readonly为运行时常量,程序运行 ...
- 三种不同实现初始化和销毁bean之前进行的操作的比较
Spring容器中的bean是有生命周期的,Spring 允许在 Bean 在初始化完成后以及 Bean 销毁前执行特定的操作,常用的设定方式有以下三种: 通过实现 InitializingBean/ ...
- 一个基于STSdb和fastJson的磁盘/内存缓存
一个基于STSdb和fastJson的磁盘/内存缓存 需求 业务系统用的是数据库,数据量大,部分只读或相对稳定业务查询复杂,每次页面加载都要花耗不少时间(不讨论异步),觉得可以做一下高速缓存,譬如用n ...
- TensorFlow 入门之手写识别(MNIST) softmax算法
TensorFlow 入门之手写识别(MNIST) softmax算法 MNIST flyu6 softmax回归 softmax回归算法 TensorFlow实现softmax softmax回归算 ...
- as3 Loader程序域
Loader的 load方法有两个参数 第二个参数是LoaderContext对象 LoaderContext对象里有一个applicationDomain( 程序 域)对象 设置程序域对象可以设置两 ...
- Linux编程之给你的程序开后门
这里说的"后门"并不是教你做坏事,而是让你做好事,搭建自己的调试工具更好地进行调试开发.我们都知道,当程序发生异常错误时,我们需要定位到错误,有时我们还想,我们在不修改程序的前提下 ...
- iOS开发-OC语言 (四)数组
知识点 1.NSArray 2.NSMutableArray 1.数组的基本用法: 2.数组的遍历 3.数组排序 =========== NSArray 不可变数组 ============= ...
- git（安装）配置
安装: git安装程序下载:https://git-scm.com/. 配置: $ git config --global user.name "Your Name" $ git ...
- putty连接远程局域网的MySql（不需要单独打开plink）
3316 是本地端口,映射到远程内网的一台MySql主机 10.8.2.172
- 数据结构之Binary Search Tree (Java)
二叉查找树简介 二叉查找树(Binary Search Tree), 也成二叉搜索树.有序二叉树(ordered binary tree).排序二叉树(sorted binary tree), 是指一 ...