参考：

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页面中。

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title></title>

    <style type="text/css">

        canvas {

            background-color: black;

        }

    </style>

</head>

    <body>

        <canvas id="myCanvas" width="1024" height="768" style="border:1px solid #d3d3d3;">

         </canvas>

        <script>

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

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

            ctx.font = "30px Verdana";

            // Create gradient

            var gradient = ctx.createLinearGradient(0, 0, c.width, 0);

            gradient.addColorStop("0", "magenta");

            gradient.addColorStop("0.5", "blue");

            gradient.addColorStop("1.0", "red");

            // Fill with gradient

            ctx.fillStyle = gradient;

            for (i = 1; i < 300; ++i) {

                ctx.fillText("*", Math.random()*1024, Math.random()*768);

            }

        </script>

</body>

</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. mysql delimiter 存储过程

    命令行登录mysql cd /d D:\database\mysql1\bin mysql.exe -P 3306 -h 127.0.0.1 -u root -p USE tbschedule del ...

  2. HTML特殊字符的html、js、css写法汇总

    ⇠ 箭头类 符号 UNICODE 符号 UNICODE HTML JS CSS HTML JS CSS ⇠ &#8672 \u21E0 \21E0 ⇢ &#8674 \u21E2 \2 ...

  3. Spring MVC multipart/form-data Controller 400

    问题很简单是解析器定义问题 SpringMVC默认解析器 <bean id="multipartResolver" class="org.springframewo ...

  4. 第九篇：使用 lstat 函数获取文件信息

    前言 在之前的文章中,描述过如何用 fcntl 函数改变文件的状态标记.但,文件还有很多信息,如文件类型,权限设置,设备编号,访问时间等等.如果要获取这些信息,则使用函数 lstat 可以轻松达到这个 ...

  5. Android无线测试之—KEYCODE键值对应大全

    KEYCODE列表电话键键名 描述 键值 KEYCODE_CALL 拨号键5    KEYCODE_ENDCALL 挂机键6    KEYCODE_HOME 按键Home3    KEYCODE_ME ...

  6. 面试10大算法汇总——Java篇

    问题导读 1 字符串和数组 2 链表 3 树 4 图 5 排序 6 递归 vs 迭代 7 动态规划 8 位操作 9 概率问题 10 排列组合 11 其他 -- 寻找规律 英文版 以下从Java角度解释 ...

  7. OpenvSwitch2.4.0源码解读

    原文发表在我的博客主页,转载请注明出处! 一.前言 OpenvSwitch,虚拟交换机,以下简称OVS,是云计算和SDN领域非常重要的一个开源交换机,如果需要深入研究云计算和SDN的数据平面,读懂OV ...

  8. Kotlin——中级篇（二）： 属性与字段详解

    在前面的章节中,详细的为大家讲解到了Kotlin中对类的类的定义.使用.初始化.初始化.类继承等内容,但是在一个类中,几乎上是不可能不出现属性与字段(field)的,这一篇文章就为大家奉上Kotlin ...

  9. 【BZOJ5060】魔方国 特判

    [BZOJ5060]魔方国 Description 小奇和魔法猪打开了战狂的遗迹,穿越到了东元20年.东元元年,战狂率领一千万士兵毁灭了一个又一个文明,并建立起了新文明——昌和帝国,招募了八位伟人:大 ...

  10. ITMS-SERVICES://方式安装IPA在IOS 7.1中的变化

    转:https://laoyur.com/?p=414 iOS7.1中,通过itms-services://方式安装ipa已经发生了改变,.plist文件必须是https://的,.ipa文件的链接则 ...