<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>星星</title>
</head>
<body>
<canvas id="canvas">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script type=text/javascript>
window.onload=function(){
var canvas = document.getElementById('canvas');
canvas.width=1200;
canvas.height=800;

var context=canvas.getContext('2d');
//使用canvas绘制

var skyStyle = context.createLinearGradient(0, 0, 0, canvas.height);
skyStyle.addColorStop(0.0, "black");
skyStyle.addColorStop(1.0, "#035");
context.fillStyle = skyStyle;
context.fillRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < 200; i++){
var r = Math.random()*5+5;
var x = Math.random()*canvas.width;
var y = Math.random()*canvas.height*0.65;
var a = Math.random()*360;
drawStar(context, x, y,r,a);

}

}
//绘制五角星
function drawStar(cxt, x, y,R,rot) {
cxt.save();
cxt.translate(x, y);
cxt.rotate(rot / 180 * Math.PI);
cxt.scale(R,R);
starPath(cxt);
cxt.fillStyle = "#fb3";
cxt.fill();
cxt.restore();
//绘制出在（x,y）,大小为R，旋转rot度的五角星
}
function starPath(cxt){

cxt.beginPath();
for (var i = 0; i < 5; i++) {
cxt.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI), -Math.sin((18 + i * 72 ) / 180 * Math.PI));
cxt.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI)*0.5, -Math.sin((54 + i * 72 ) / 180 * Math.PI)*0.5);
}
cxt.closePath();
}

</script>
</body>
</html>

星星dom的更多相关文章

  1. 微信小程序滚动动画，点击事件及评分星星制作！

    前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...

  2. 【JavaScript学习整理】DOM对象(location history screen navigator)

    DOM: 描述网页各个组成部分之间的关系. parentNode: 父节点 childNode: 子节点 firstChild: 第一个子节点 lastChild: 最后一个子节点 nextSibli ...

  3. 014、BOM与DOM对象的应用

    Screen屏幕对象 Width:屏幕的宽度 Height:屏幕的高度 availWidth:屏幕的有效宽度(不含任务栏) availHeight:屏幕的有效高度(不含任务栏) colorDepth: ...

  4. html dom 转化成图片踩坑记（canvas toDataURL）

    需求 在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...

  5. JS运算符，流程控制，函数，内置对象，BOM与DOM

    运算符 1.算数运算符 运算符 描述 + 加 - 减 * 乘 / 除 % 取余(保留整数) ++ 递加 - - 递减 ** 幂 var x=10; var res1=x++; '先赋值后自增1' 10 ...

  6. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

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

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

  8. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  9. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

随机推荐

  1. 《Spring Security3》第四章第三部分翻译下（密码加salt）

    你是否愿意在密码上添加点salt? 如果安全审计人员检查数据库中编码过的密码,在网站安全方面,他可能还会找到一些令其感到担心的地方.让我们查看一下存储的admin和guest用户的用户名和密码值: 用 ...

  2. Ubuntu MySQL的安装使用

    删除 mysql sudo apt-get autoremove --purge mysql-server-5.0 sudo apt-get remove mysql-server sudo apt- ...

  3. 【CF659F】Polycarp and Hay（并查集，bfs）

    题意: 构造一个矩阵,使得: 矩阵所有格子中数字都小于等于原矩阵,并且至少有一个元素和原矩阵相等, 构造的矩阵除了0以外的数字必须联通并且相等,矩阵中元素之和为K. n,m<=1e3,1< ...

  4. oracle怎么查看表空间里有哪些表

    select TABLE_NAME,TABLESPACE_NAME from dba_tables where TABLESPACE_NAME='表空间名'; 注意:表空间名要大写

  5. 用“道”的思想解决费用流问题---取/不取皆是取 （有下界->有上界） / ACdreamoj 1171

    题意: 给一个矩阵,给出约束:i(0<i<n)行至少去ai个数,j行至少取bi个数,要求取的数值之和最小. 开始一见,就直接建了二分图,但是,发现这是有下界无上界最小费用流问题,肿么办.. ...

  6. js react 全选和反选

    onCheckAll = (data) => { var CheckBox = document.getElementsByName(data); for(let i=0;i<CheckB ...

  7. Material Theme

    Material Theme提供了一下功能: 1.系统widgets可以设置调色板 2.系统widgets的触摸反馈 3.Activity过渡动画 你可以根据你品牌的色彩来定义Material The ...

  8. 文件重定向，getline()获取一样，屏幕输出流，格式控制符dec,oct,hex，精度控制setprecision(int num)，设置填充，cout.width和file(字符)，进制输入

     1.在window下的命令重定向输出到文件里 2.将内容输入到某个文件里的方式:命令<1.txt (使用1.txt中的命令) 3.读取文件里的名,然后将命令读取最后输出到文件里.命令< ...

  9. html+vlc 播放多视频

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  10. 集成CCFlow工作流与GPM的办公系统驰骋CCOA介绍（三）

    通过组织结构能够对项目的岗位.部门.人员进行增删改操作. 加入新部门.并为新部门加入人员: 选中部门后,点击鼠标右键,能够选择加入平级部门或下属部门. 新建部门时,须要给部门设置部门编号.名称.与部门 ...