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. C++中的左移、右移运算

    移位运算包含“逻辑移位”(logical shift)和“算术移位”(arithmetic shift). 逻辑移位:移出去的位丢弃,空缺位(vacant bit)用 0 填充. 算术移位:移出去的位 ...

  2. iOS第三方地图－百度地图中心点定位

    使用百度地图定位后,滑动地图,使用反编码确定地图中心店的位置信息 // // MapControl.m // quyizu // // Created by apple on 15/9/2. // C ...

  3. 624. Maximum Distance in Arrays

    Problem statement Given m arrays, and each array is sorted in ascending order. Now you can pick up t ...

  4. /etc/fstab readyonly 解决办法

    阿里云主机切换地区强制升级后,“新的磁盘盘符识别为vdb1,但是在/etc/fstab中记录的挂载信息还是旧的xvdb1,导致磁盘挂载失败” 机子启动出错了. 按提示 输入 root的密码,进入以Re ...

  5. No route info of this topic

    使用rocketmq时报错 com.alibaba.rocketmq.client.exception.MQClientException: No route info of this topic, ...

  6. 简述WEB项目前端脚本的一次重构历程,labJs,requireJs实践[转载]

    重构前的状态:    大量的js代码混在繁多的Jsp文件中,对第三方的js库依赖也很杂乱.虽然在部分交互性较强的页面中,将js代码分离到了独立的js文件中,但是代码结构及依赖管理依然很乱.不说新人来了 ...

  7. Kibana 可视化监控报警插件 KAAE 的介绍与使用

    https://blog.csdn.net/phachon/article/details/53424631 https://blog.csdn.net/Dragon714/article/detai ...

  8. 创建SSH keys

    1.检查是否已经有SSH Key存在 windows: type "%userprofile%\.ssh\id_rsa.pub" Linux: cat ~/.ssh/id_rsa. ...

  9. MySQL事务及Spring事务管理

    事务,是在数据库中用于保证数据正确性的一种机制,涉及到很多概念以及不同的情况,这里做一个总结 相关概念 事务四特性(ACID) 原子性(Atomicity,或称不可分割性):要么全部完成或者全部不完成 ...

  10. 使用mysql-connector-java.jar连接MySql时出现：Error while retrieving metadata for procedure columns: java.sql.SQLException: Parameter/Column name pattern can not be NULL or empty.

    错误如下: 程序实现的功能是调用一个存储过程,但是不认这个存储过程的参数. 原因是版本太高了,由于使用的是6.0.6版本的,改成5.1.38即可. POM配置如下: <!-- mysql-con ...