canvas是html中的一个元素，可以通过js操控绘图！

可以绘制各种图形，各种填充样式！

绘制时可以进行旋转，缩放，平移，但并不是很灵活！

有一对比较好用的方法是save restore！

save 与 restore的作用并不是保存图像，而是恢复到之前的偏移，旋转，缩放状态！

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  5.     </head>
  6.     <body>
  7.     <script>
  8.             //全局变量
  9.             var canvas = document.createElement('canvas');
  10.             var canvasContext = canvas.getContext('2d');
  11.             var canvasWidth = window.innerWidth;
  12.             var canvasHeight = window.innerHeight;
  13.             init();
  14.             function init(){
  15.                 document.body.appendChild(canvas);
  16.                 canvas.width = canvasWidth;
  17.                 canvas.height = canvasHeight;
  18.                 canvas.setAttribute('style','background:black;border:5px solid red');//设置边框
  19.             }
  20.  
  21.             /**绘制矩形快
  22.              * in_fileStyle  颜色;
  23.              * in_x,in_y     左上角坐标
  24.              * in_width,in_height    宽度和高度
  25.              */
  26.             function drawRect(in_fileStyle,in_x,in_y,in_width,in_height){
  27.                 canvasContext.fillStyle=in_fileStyle;
  28.                 canvasContext.fillRect(in_x,in_y,in_width,in_height);
  29.             }
  30.  
  31.             /**绘制线条
  32.              * in_fileStyle  颜色;
  33.              * in_x1,in_y1   起点坐标;
  34.              * in_x2,in_y2   终点坐标;
  35.              * in_size       线条宽度
  36.              */
  37.             function drawLine(in_fileStyle,in_x1,in_y1,in_x2,in_y2,in_size){
  38.                 canvasContext.beginPath();//重置当前路径 或 开始一条路径
  39.                 canvasContext.strokeStyle=in_fileStyle;
  40.                 canvasContext.lineWidth=in_size;
  41.                 canvasContext.moveTo(in_x1,in_y1);
  42.                 canvasContext.lineTo(in_x2,in_y2);
  43.                 canvasContext.stroke();//绘制
  44.             }
  45.             /**绘制圆圈或实心圆
  46.              * in_fileStyle  颜色;
  47.              * in_x,in_y      圆心坐标
  48.              * in_r             半径
  49.              * in_startAngle,in_endAngle    起始角度，结束角度
  50.              * in_size         宽度
  51.              */
  52.             function drawCircle(in_fileStyle,in_x,in_y,in_r,in_startAngle,in_endAngle,in_size){
  53.                 canvasContext.beginPath();
  54.                 canvasContext.strokeStyle=in_fileStyle;
  55.                 canvasContext.lineWidth=in_size;
  56.                 canvasContext.arc(in_x,in_y,in_r,in_startAngle,in_endAngle);
  57.                 canvasContext.stroke();//绘制
  58.             }
  59.             /**绘制文字
  60.              * in_fileStyle  颜色;
  61.              * in_x,in_y      左下角坐标
  62.              * in_size         大小
  63.              * in_fontType     字体
  64.              * in_isSolid     是否填充 true or false
  65.              * in_text         内容
  66.              * in_lineSize     线条宽度
  67.              **/
  68.              function drawText(in_fileStyle,in_x,in_y,in_size,in_fontType,in_isSolid,in_text,in_lineSize){
  69.                 canvasContext.strokeStyle=in_fileStyle;
  70.                 canvasContext.fillStyle=in_fileStyle;
  71.                 canvasContext.font=in_size + "px " + in_fontType;
  72.                 if(in_isSolid==true){
  73.                     canvasContext.fillText(in_text,in_x,in_y);
  74.                 }else{
  75.                     canvasContext.lineWidth=in_lineSize;
  76.                     canvasContext.strokeText(in_text,in_x,in_y);
  77.                 }
  78.              }
  79.  
  80.              /**
  81.               * 绘制图像,目前此函数是异步绘制，对图层次序不能控制
  82.               */
  83.              function drawImge(in_url,in_x,in_y,in_width,in_height){
  84.                 var stop = false;
  85.                 var img=new Image();
  86.                 img.src=in_url;
  87.                 img.onload = function(){
  88.                     canvasContext.drawImage(img,in_x,in_y,in_width,in_height);
  89.                 };
  90.              }
  91.             /*drawRect("rgba(255,0,0,1)",30,30,720,700);
  92.             drawLine("#FF0000",10,10,720,400,13);
  93.             drawCircle("#00F0F0",300,300,50,0,2*Math.PI,100);
  94.             drawText("#00F0F0",400,500,100,"Arial",false,"HELLO",4);
  95.             drawImge("imges/snow.png",0,0,200,200);*/
  96.  
  97.             //随机产生雪花
  98.             var snows=[];    //雪花数组
  99.             function productSnow(){
  100.                 // clear the canvas
  101.                 canvasContext.fillStyle = "rgba(0,0,0,1)";
  102.                 canvasContext.fillRect(0,0, canvasWidth, canvasHeight);
  103.                 var snow = new oneSnow(Math.random()*canvasWidth, Math.random()*canvasHeight*0.3,100);
  104.                 snows.push(snow);
  105.                 if(snows.length > 100){    //只保留二十个雪花
  106.                     snows.shift();        //删除第一个雪花
  107.                 }
  108.                 //绘制数组中的每一个雪花
  109.                 for(var i=0;i<snows.length;i++){
  110.                     snows[i].showSnow().moveToDown();
  111.                 }
  112.             }
  113.             //定义一个雪花
  114.             function oneSnow(positionX,positionY,snowSize){
  115.                 this.x=positionX;
  116.                 this.y=positionY;
  117.                 this.size=snowSize;
  118.  
  119.                 //向下运动 y坐标大
  120.                 this.moveToDown=function(){this.y=this.y+5}
  121.                 //显示
  122.                 this.showSnow = function(){
  123.                     drawImge("imges/snow.png",this.x, this.y,this.size,this.size);
  124.                     //drawCircle("#00F0F0",this.x,this.y,10,0,2*Math.PI,20);
  125.                     return this;
  126.                 }
  127.             }
  128.             setInterval(productSnow,1000/150);//每个1/3秒调用一次productSnow函数
  129.     </script>
  130.     </body>
  131. </html>

雪花

canvas绘图基础及基于粒子系统的雪花飘落的更多相关文章

  1. Android中Canvas绘图基础详解（附源码下载） (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

  2. canvas绘图基础

    <canvas>元素是HTML5中的绘图元素,通过定义一个画布区域,然后使用javascript动态地在这个区域里面绘制图形,对于2D和3D图形都可以绘制,我们将其分成2D上下文和WebG ...

  3. Canvas绘图基础（一）

    简单图形绘制 矩形:描边与填充 Canvas的API提供了三个方法,分别用于矩形的清除.描边及填充 clearRect(double x, double y, double w, double h) ...

  4. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  5. HTML5 canvas绘图基础（电子名片生成器源码）

    创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...

  6. HTML5自学笔记[ 17 ]canvas绘图基础4

    绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...

  7. HTML5自学笔记[ 16 ]canvas绘图基础3

    canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...

  8. HTML5自学笔记[ 14 ]canvas绘图基础2

    canvas绘制路径不仅可以绘制直线和多边形,还提供了绘制曲线的方法,利用这些方法可以画出多种曲线效果. 方法1:arc(x,y,r,起始弧度,结束弧度,绘制方向);其中(x,y)为圆心坐标,r为半径 ...

  9. HTML5自学笔记[ 23 ]canvas绘图基础7

    变换矩阵: transform(a,b,c,d,e,f),多次使用该函数,效果是多次状态改变的累加: setTransform(a,b,c,d,e,f),会忽略之前的变换,从起始状态开始改变.

随机推荐

  1. Introduction to SharePoint hierarchy

    /* Author: Jiangong SUN */ I've participated in a SharePoint 2010 project to build an intranet. Base ...

  2. 用T4消除代码重复，对了，也错了

    用T4消除代码重复,对了,也错了 背景 我需要为int.long.float等这些数值类型写一些扩展方法,但是我发现他们不是一个继承体系,我的第一个思维就是需要为每个类型重复写一遍扩展方法,这让我觉得 ...

  3. solrcloud集群部署

    Zookeeper安装 Zookeeper的安装和配置十分简单, 既可以配置成单机模式, 也可以配置成集群模式. 下面将分别进行介绍. 注意防火墙和selinux,关闭后进行如下配置,由于是Java写 ...

  4. 深入浅出学习Spring框架（三）：AOP 详解

    AOP的英文解释——AOPAspect Oriented Programming面向切面编程.主要目的是通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术. 在反 ...

  5. Python爬虫学习——使用Cookie登录新浪微博

    1.首先在浏览器中进入WAP版微博的网址,因为手机版微博的内容较为简洁,方便后续使用正则表达式或者beautifulSoup等工具对所需要内容进行过滤 https://login.weibo.cn/l ...

  6. C#中的文件操作2

    1. 读取文件的方法: 1.  声明一个文件流: 目的是为了内存与文件之间的桥梁,可以进行数据的往来. FileStream fs = new FileStream(filename,FileMode ...

  7. java异常处理01

    当我们做java项目的时候,多多少少都会出现一些异常,如何快速处理异常也将会影响到一个项目开发的进度. 以下将是面对的一些异常将如何去处理: 1.数据库没有启动 解决方法:计算机-->管理--& ...

  8. USACO 4.2 The Perfect Stall（二分图匹配匈牙利算法）

    The Perfect StallHal Burch Farmer John completed his new barn just last week, complete with all the ...

  9. Cocos2d-x 3.x事件分发机制总结

    在2.x中处理事件需要用到委托代理(delegate),相信学过2.x的触摸事件的同学,都知道创建和移除的流程十分繁琐.而在3.x中由于加入了C++11的特性,而对事件的分发机制通过事件分发器Even ...

  10. gridcontrol datatemplate trigger

    <TextBlock Name="textBlock" HorizontalAlignment="Left" Text="{Binding Va ...