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. XV6第一个进程

    第一个进程 本章通过第一个进程的创建来解释 xv6 是如何开始运行的,让我们得以一窥 xv6 提供的各个抽象是如何实现和交互的.xv6 尽量复用了普通操作的代码来建立第一个进程,避免单独为其撰写代码. ...

  2. UVA624 CD,01背包+打印路径，好题！

    624 - CD 题意:一段n分钟的路程,磁带里有m首歌,每首歌有一个时间,求最多能听多少分钟的歌,并求出是拿几首歌. 思路:如果是求时常,直接用01背包即可,但设计到打印路径这里就用一个二维数组标记 ...

  3. MVC4 上传图片并生成缩略图

    Views @using (Html.BeginForm("Create","img",FormMethod.Post, new { enctype = &qu ...

  4. ubuntu使用git的时：Warning: Permanently added the RSA host key for IP address '13.250.177.223' to the list of known hosts.

    1:问题现象: hlp@hlp:~/code/github_code/catch_imooc1$ git push origin master Warning: Permanently added t ...

  5. SpringBoot自动配置的源码解析

    首先,写源码分析真的很花时间,所以希望大家转的时候也请注明一下,Thanks♪(･ω･)ﾉ SpringBoot最大的好处就是对于很多框架都默认的配置,让我们开发的时候不必为了大一堆的配置文件头疼,关 ...

  6. POJ 2135 最小费用最大流 入门题

    Farm Tour Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 19207   Accepted: 7441 Descri ...

  7. DTRACE FOR MYSQL PHP

    Using DTrace to troubleshoot Apache DTrace for MySQL , Inspecting MySQL with DTrace , MySQL DTrace P ...

  8. 对CSS尺寸单位'em'的长期误解

    一直以来认为'em'是相对于父元素的字体大小. 直到今天学习移动WEB开发,重新复习css的尺寸大小时,惊奇发现:对em深深的误解了!!! 在CSS官网对em的解释实例是: a. h1{line-he ...

  9. 关于maven的规则插件：Maven Enforcer plugin

    Maven提供了Maven-Enforcer-Plugin插件,用来校验约定遵守情况(或者说校验开发环境).比如JDK的版本,Maven的版本,开发环境(Linux,Windows等),依赖jar包的 ...

  10. topcoder srm 610

    div1 250pt: 题意:100*100的01矩阵,找出来面积最大的“类似国际象棋棋盘”的子矩阵. 解法:枚举矩阵宽(水平方向)的起点和终点,然后利用尺取法来找到每个固定宽度下的最大矩阵,不断更新 ...