参考：

1、http://www.w3school.com.cn/tags/canvas_filltext.asp

2、产生随机数：http://www.cnblogs.com/banbu/archive/2012/07/25/2607880.html

效果图：

思路：

1、创建一个画布。（背景为黑色）

2、绘制1个“星星”，设法变成n个。

3、把画布放入HTML页面中。

代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title></title>
  6.     <style type="text/css">
  7.         canvas {
  8.             background-color: black;
  9.         }
  10.     </style>
  11. </head>
  12.     <body>
  13.         <canvas id="myCanvas" width="1024" height="768" style="border:1px solid #d3d3d3;">
  14.          </canvas>
  15.         <script>
  16.             var c = document.getElementById("myCanvas");
  17.             var ctx = c.getContext("2d");
  18.  
  19.             ctx.font = "30px Verdana";
  20.             // Create gradient
  21.             var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
  22.             gradient.addColorStop("0", "magenta");
  23.             gradient.addColorStop("0.5", "blue");
  24.             gradient.addColorStop("1.0", "red");
  25.             // Fill with gradient
  26.             ctx.fillStyle = gradient;
  27.             for (i = 1; i < 300; ++i) {
  28.                 ctx.fillText("*", Math.random()*1024, Math.random()*768);
  29.             }
  30.         </script>
  31. </body>
  32.  
  33. </html>

重用w3school代码。

【JavaScript】满天星的更多相关文章

  1. javascript创建多行字符串的方法（转）

    JS里并没有标准的多行字符串的表示方法,但是在用模板的时候,为了保证模板的可阅读性,我们又不可避免的使用多行字符串,所以出现了各种搞法,这里以一段jade的模板作为示例,简单总结和对比一下. 一.字符 ...

  2. javascript的几种使用多行字符串的方式

    JS里并没有标准的多行字符串的表示方法,但是在用模板的时候,为了保证模板的可阅读性,我们又不可避免的使用多行字符串,所以出现了各种搞法,这里以一段jade的模板作为示例,简单总结和对比一下. 字符串相 ...

  3. 【JavaScript】下大雪

    引用[JavaScript]满天星的代码,稍作修改的结果: function drawStars() { for (i = 1; i < 100; ++i) { ctx.fillText(&qu ...

  4. JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

  5. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  6. Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收

    执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...

  7. 探究javascript对象和数组的异同，及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  8. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  9. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

随机推荐

  1. Cross compile perl

    Alex Suykov had do some work for this purpose, and my compile script is based on her patch. Steps St ...

  2. 卡友友刷MPOS注册开通流程!

    1.下载友刷APP:打开微信扫描机器背面二维码—点击右上角游览器打开 2. 注册-身份证认证-结算卡绑定:用本人手机号注册完成后,顺着进行身份认证.以及储蓄结算卡绑定.具体看下图: 3.绑定机器:选择 ...

  3. ubuntu终端使用代理

    sudo http_proxy=http://your_proxy:proxy_port dropbox start -i or sudo https_proxy=http://your_proxy: ...

  4. unity 打开文件夹并鼠标选中某文件

    System.Diagnostics.Process p = new System.Diagnostics.Process(); p.StartInfo.FileName = "explor ...

  5. 使用ghost硬盘对拷备份系统

    公司有台server装了OA系统.要备份数据.同一时候假设系统出错之后可以及时回复.所以有买了块同型号硬盘. 用ghost的硬盘对拷功能,将原硬盘的系统和数据拷到新硬盘上.新硬盘挂到server上.当 ...

  6. mstsc远程登录设置

    mstsc终于可以连上了, 1.系统属性 远程允许, 2.开启三个服务: Remote Desktop ConfigurationRemote Desktop ServicesRemote Deskt ...

  7. SQL语法：查询此表有另外一个表没有的数据

    select bei.ExamItem_Code2,*from PeisPatientExamItem ppeijoin PeisPatientFeeItem ppfion ppfi.ID_Patie ...

  8. EXCEL自动导出HTML

    话说博主我以前总是为资料共享的问题发愁,刚才鼓捣了一下EXCEL.发现有个功能还是不错的'发布' 以OFFICE2013为标准吧. 点击文件--导出-- 更改文件类型---另存为--(网页)htm 点 ...

  9. 码云平台, 生成并部署SSH key

    参考链接: http://git.mydoc.io/?t=154712 步骤如下: 1. 生成 sshkey: ssh-keygen -t rsa -C "xxxxx@xxxxx.com&q ...

  10. Qunit 和 jsCoverage使用方法（js单元测试）

    Qunit 和 jsCoverage使用方法(js单元测试) 近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的 ...