【JavaScript】满天星
2024-09-04 11:16:41
参考:
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代码。
最新文章
- angular----关于注入HTML
- tableview的重用机制(面试必问)
- php中curl模拟浏览器来传输数据
- Linux 计划任务 Crontab 笔记与总结(2)Crontab 的基本组成与配置
- php sso单点登录原理阐述
- C# 字符流打印类
- jQuery中两种阻止事件冒泡的区别
- NPOI 创建Excel,数据读取与写入
- Tabs - 选项卡插件
- [wp8游戏] cocos2d-x v2.2 + VS2013 环境搭建
- iOS网络层设计感想
- 详解java设计模式之责任链模式
- int指令
- Java工程师可以从事的几大职业
- 常用Yum镜像源
- EZ 2018 1 21 2018noip第五次膜你赛
- python中,获取字符串的长度
- js将UTC时间转化为当地时区时间
- HBase(五)HBase的API操作
- redhat 6.6 安装 (LVM)
热门文章
- 《The Swift Programming Language》的笔记-第24页
- 详解ASP.NET提取多层嵌套json数据的方法
- VisualSVN 5.1.5 破解版 手动破解教程 生成dll文件
- Learning to Compare: Relation Network 源码调试
- LBP纹理特征
- hdu 3681(bfs+二分+状压dp判断)
- Spring框架中的AOP技术----注解方式
- bnuoj 34990(后缀数组 或 hash+二分)
- iOS xcode6.0使用7.1运行程序 iphone5上下有黑条
- 【Trello】使用指南