html5--js函数在canvas中的应用

总结：

1、script中的函数写了要调用

2、rgb（）这样的模式的色彩比较适合做变量

3、body的onload事件

4、带参函数

效果：

代码：

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

 <body onLoad="draw()">

     <canvas id="myCanvas" width="600px" height="300px" style="border: 1px solid #c3c3c3;">

         <script>

             function draw(){

                 var c=document.getElementById("myCanvas");

                 var cxt=c.getContext("2d");

                 for(var i=0;i<12;i++){

                     for(var j=0;j<24;j++){

                         cxt.fillStyle='rgb(240,'+Math.floor(255-11.5*i)+','+Math.floor(255-11.5*j)+')';

                         cxt.beginPath();

                         cxt.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);

                         cxt.closePath();

                         cxt.fill();

                     }

                 }

             }

 //            draw();

         </script>

     </canvas>

 </body>

 </html>

html5--js函数在canvas中的应用的更多相关文章

  1. js函数在frame中的相互调用详解

    原文章:http://www.jb51.net/article/47557.htm   一个HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTM ...

  2. js函数在frame中的相互的调用

    框架编程概述一个HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一 ...

  3. Node.js 函数

    Node.js 函数 在JavaScript中,一个函数可以作为另一个函数接收一个参数.我们可以先定义一个函数,然后传递,也可以在传递参数的地方直接定义函数. Node.js中函数的使用与Javasc ...

  4. Node.js函数

    Node.js 函数 在JavaScript中,一个函数可以作为另一个函数的参数.我们可以先定义一个函数,然后传递,也可以在传递参数的地方直接定义函数. Node.js中函数的使用与Javascrip ...

  5. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  6. HTML5 Canvas中实现绘制一个像素宽的细线

    正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...

  7. HTML5 在canvas中绘制复杂形状

    作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/32942667 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,画图环 ...

  8. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  9. HTML5 + JS 网站追踪技术：帆布指纹识别 Canvas FingerPrinting Universally Unique Identifier，简称UUID

    1 1 1 HTML5 + JS  网站追踪技术:帆布指纹识别 Canvas FingerPrinting 1 一般情况下,网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体,这 ...

随机推荐

  1. JS获取粘贴内容

    http://classjs.com/2013/03/05/js%E8%8E%B7%E5%8F%96%E7%B2%98%E8%B4%B4%E5%86%85%E5%AE%B9/ 思路：在编辑环境中，粘贴 ...

  2. XV6操作系统接口

    操作系统接口 操作系统的工作是(1)将计算机的资源在多个程序间共享,并且给程序提供一系列比硬件本身更有用的服务.(2)管理并抽象底层硬件,举例来说,一个文字处理软件(比如 word)不用去关心自己使用 ...

  3. 【Ajax 3】JavaScript封装Ajax

    导读:上一篇博客简单介绍了一下对Ajax中的核心对象XMLHttpRequest的封装.那么为了方便对Ajax的应用,我们还需要进一步的对Ajax的基本功能进行下一步的封装,不得不说的是早就有人专门写 ...

  4. hdu 2795线段树

    #include<stdio.h> #define N 200005 int h,w,n; struct node { int x,y,max; }a]; int mmax(int e,i ...

  5. 潜伏者（codevs 1171）

    题目描述 Description [问题描述]R 国和S 国正陷入战火之中,双方都互派间谍,潜入对方内部,伺机行动.历尽艰险后,潜伏于 S 国的R 国间谍小C 终于摸清了S 国军用密码的编码规则:1． ...

  6. WordPress升级错误：class-wp-filesystem-direct.php on line 122

    错误描述:WordPress在后台进行版本升级时,出错,之后进入前台或者后台,都无法访问进入,错误信息如下:Warning: copy(/home/xxx/public_html/wordpress/ ...

  7. CDN是什么与CDN加速的原理

    CDN是什么 CDN全称:Content Delivery Network或Content Ddistribute Network,即内容分发网络 CDN设计思路 避让:尽可能避开互联网上有可能影响数 ...

  8. java的异常与记录日志

    今天在<java编程思想>一书中看到了异常与记录日志,发现学会将异常记录进日志中还是很有必要的,以下是书中的例子: import java.io.PrintWriter; import j ...

  9. CSS 空中飘动的云动画

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. Excel小tips - 如何实现多列成绩统一排名

    本文参考:http://mp.weixin.qq.com/s/XR49hyG9Cods7rOcsM-tRg 如果有以下数据文件,需要进行成绩排名. 第一步:先在成绩列后边添加一列,用来显示名次.如下: ...