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),会忽略之前的变换,从起始状态开始改变.
随机推荐
- HDU 4062 Partition
Partition Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- MapXtreme+Asp.net 动态轨迹（请求大神指点）
功能简介:在MapXtreme+Asp.net的环境下实现轨迹回放功能,经过两天的努力基本实现此功能.但还有部分问题需要解决,求大神们指点迷津,问题会在结尾处提出. 客户端前台页面 <asp:S ...
- Python之路 1Day
1.python基础入门 作者:黄旭 提示: 语法基于python3.5版本(会提示2.7版本和3.5版本的区别) Python命令行将以>>>开始,比如 >>> ...
- 动态修改ViewPagerIndicator CustomTabPageIndicator Tab标签文字颜色
ViewPagerIndicator 的CustomTabPageIndicator 默认是没有Tab选中修改TextView颜色特效的. 可以通过以下方式实现: 新建viewpager_title_ ...
- iOS开发-大文件下载与断点下载思路
大文件下载方案一:利用NSURLConnection和它的代理方法,及NSFileHandle(iOS9后不建议使用)相关变量: @property (nonatomic,strong) NSFile ...
- 微信小程序数据请求方法wx.request小测试
微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...
- composer install 遇到问题 Problem 1 - phpunit/phpunit 5.7.5 requires php ^5.6 || ^7.0 -> your PHP version (5.5.3 0) does not satisfy that requirement.
$ composer install Loading composer repositories with package information Updating dependencies (inc ...
- 一个经典的js中关于块级作用域和声明提升的问题
function functions(flag) { if (flag) { function getValue() { return 'a'; } } else { function getValu ...
- 如何运用xp_cmdshell 执行多行cmd命令
因为需要利用sql 脚本调用外部程序,所以尝试xp_cmdshell 命令,发现其默认只能执行一行命令,最后找到了下面方法: 将多行cmd 命令处理成bat文件,然后直接利用所在路径+文件来执行: ...
- Oracle与Sqlserver：Order by NULL值介绍
针对页面传参到in的子集中去进行查询操作的话,就会有in(xxx,null),这样就会导致查询的结果中其实直接过滤掉了null,根本就查不出来null的值.之前对于null的操作都是进行不同数据库的n ...