<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用HTML5绘制的一个星空特效图</title>
<style>
canvas{
display: block;border:1px dotted skyblue;
}
body{
font-family: 微软雅黑;
} </style>
</head>
<body>
<h1>用HTML5绘制的一个星空特效图</h1>
<canvas id="canvas" width="" height=""> </canvas>
<script>
var nimo={};
window.onload=function(){
nimo.canvas=document.getElementById('canvas');
nimo.context=nimo.canvas.getContext('2d'); nimo.starBgImg=new Image();
nimo.starBgImg.src='http://sandbox.runjs.cn/uploads/rs/167/znddwgfj/star-bg.jpg';
nimo.starBgImg.onload=function(){ //填充星星背景
nimo.statBg=nimo.context.createPattern(nimo.starBgImg,'repeat')
nimo.context.rect(,,nimo.canvas.width,nimo.canvas.height);
nimo.context.fillStyle=nimo.statBg;
nimo.context.fill(); //绘制月亮轮廓
nimo.context.beginPath();
nimo.context.arc(,,,0.6*Math.PI,1.3*Math.PI);
nimo.context.bezierCurveTo(,,,,,) //填充月亮轮廓和设置投影
nimo.context.shadowColor="blue";
nimo.context.shadowBlur=;
nimo.context.strokeStyle="blue";
nimo.context.stroke(); //填充放射渐变给月亮
nimo.radialGradient=nimo.context.createRadialGradient(,,,,,);
nimo.radialGradient.addColorStop(,'white')
nimo.radialGradient.addColorStop(,'#999')
nimo.context.fillStyle=nimo.radialGradient;
nimo.context.fill() //绘制月亮的研究和嘴巴
nimo.context.shadowColor="white";
nimo.context.beginPath();
nimo.context.moveTo(,);
nimo.context.lineTo(,);
nimo.context.moveTo(,);
nimo.context.lineTo(,);
nimo.context.stroke(); nimo.context.beginPath();
nimo.context.arc(,,,,*Math.PI);
nimo.context.stroke();
nimo.context.shadowColor='transparent';
nimo.context.font="14px 微软雅黑"
nimo.context.fillText('好挫的月亮!',,)
} } </script>
<p>
demo by <a href="http://js.alixixi.com/">js.alixixi.com</a>
</p>
</body>
</html>

用HTML5绘制的一个星空特效图的更多相关文章

  1. JavaScript+svg绘制的一个饼状图

    结果: svg参考:https://www.w3.org/TR/SVG/<body onload='document.body.appendChild( pieChart([12,23,34,4 ...

  2. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

  3. HTML5 Canvas ( 绘制一片星空 )

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Html5绘制饼图统计图

    这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...

  5. 9款HTML5实现的超酷特效

    之前我们推荐了8款HTML5实现的特效和应用,今天我们带来的这9款热门的HTML5特效同样会带给你全新的视角和体验. HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表 ...

  6. C#绘制立体三维饼状图

    转载自原文 C#绘制立体三维饼状图(超酷) 内容原文地址:LINK [翻译]Julijan Sribar著3D Pie Chart一个用于绘制立体三维饼状图的C#类库[简介]本文的想法就是创建一个独立 ...

  7. 9款超绚丽的HTML5/CSS3应用和动画特效

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  8. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  9. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

随机推荐

  1. SQL关于删除的三个语句:DROP、TRUNCATE、 DELETE 的区别。

    DROP: DROP TABLE test; 删除表test,并释放空间,将test删除的一干二净. TRUNCATE: TRUNCATE test; 删除表test里的内容,并释放空间,但不删除表的 ...

  2. idea中使用逆向工程----三部曲

    逆向工程小伙伴可能都知道,可以根据公司大佬的数据库简单创建实体类和dao接口以及mapper的映射文件,逆向工程可能在数据库字段比较少的时候体现不会方便,但是当参与到数据库字段比较多的时候,我们不可能 ...

  3. 协议 - DNS

    目录 1 DNS 1.1 域名解析的历史:/etc/hosts, DNS, FQDN 1.2 域名解析流程: 域名架构 查询流程, DNS端口 1.3 合法 DNS :申请域查询授权 1.4 主机名交 ...

  4. python--pexpect

    大家好,最近工作比较忙,所以没时间来更新博客.趁着还没在下个版本来临之前,来这边再更新更新.是之前学习到的一些老知识点,就当来巩固一下了.开心QAQ 今天给大家介绍的是--Pexpect Expect ...

  5. Python全栈day 05

    Python全栈day 05 一.数据类型补充 1. int py2和py3的2种区别 py2有int和long,int的取值范围为-2^31~2^31-1,超出范围自动转为long,长整型. py2 ...

  6. urllib使用四--urlencode,urlparse,

    urllib.urlencode 把字典数据转换为URL编码 # -*- coding: cp936 -*- import urllib params = {'score':100,'name':'爬 ...

  7. TouTiao开源项目 分析笔记17 新闻媒体专栏

    1.效果预览 1.1.要实现的效果 1.2.如何调转到新闻媒体专栏 点击右上角的用户图标. 在新闻详情页面的Fragment的菜单点击事件中触发. case R.id.action_open_medi ...

  8. PHP代码审计4-漏洞挖掘思路

    漏洞挖掘思路 漏洞形成的条件 1.变量可控制 2.变量可到达有利用价值的函数(危险函数) 漏洞造成的效果 漏洞的利用效果取决于最终的函数功能,变量进入什么样的函数就导致什么样的效果 危险函数 文件包含 ...

  9. is 和 == 的区别,utf和gbk的转换,join用法

    is 和 == 的区别 # is 比较的是内存地址 # == 比较的是值 a = 'alex' b = 'alex' #int,str(小数据池)会被缓存,为了节约内存 print(id(a),id( ...

  10. 利用插件对某些网页执行javascript代码

    说明 javascript在浏览器地址栏中可以运行,也可以按F12在控制台中运行,还可以写一个插件让javascript针对某些网页执行,可以使用chrome浏览器的Content scripts,C ...