<!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. PXE自动化安装CentOS6/7

    服务器为centos7 安装前准备:关闭防火墙和SELINUX 虚拟机准备第二块网卡,设置主机模式,关闭虚拟机网络配置中主机模式的DHCP功能,并设置静态IP nmcli c a con-name e ...

  2. Intellij IDEA 像eclipse那样给maven添加依赖，且Intellij idea里在pom.xml里添加Maven依赖，本地仓库下拉列表显示包很少的血的经验

    打开pom.xml,在它里面使用快捷键:ALT+Insert  ————>点击dependency 再输入想要添加的依赖关键字,比如:输个spring   出现下图: 根据需求选择版本,完成以后 ...

  3. Python全栈day 04

    Python全栈day 04 一.解释器/编译器 补充:编译型语言和解释型语言? # 编译型:代码写完后,编译器将其变成成另外一个文件,然后交给计算机执行. c c++,c# ,java # 解释型: ...

  4. photoshop入门笔记2：PS箭头的制作

    ---恢复内容开始--- 1.     首先打开ps软件,在ps里新建一个画布这里就500*500,可以随意. 2.然后在ps软件界面上的工具栏里找到‘直线工具’,如图. 3.选择好工具之后,在ps软 ...

  5. python scrapy实战糗事百科保存到json文件里

    编写qsbk_spider.py爬虫文件 # -*- coding: utf-8 -*- import scrapy from qsbk.items import QsbkItem from scra ...

  6. pycharm中文乱码问题 总结

    前言: 这几天刚刚开始学习python,然后就安装了pycharm,但是那个中文乱码的问题真是让人心烦,在网上找了好久,都写得好乱,今天终于让我解决了,在这里总结一下经验,希望可以帮到你们 问题:如下 ...

  7. 使用perl发邮件

    如果你使用的是 window 系统,没有 sendmail 工具.这时你就可以使用 perl 的 MIME:Lite 模块作为邮件客户端来发送邮件. 这里我们直接用 cpan 来安装(需要 root ...

  8. 笔记-git-.gitignore

    笔记-git-.gitignore 1.      git忽略文件 有的文件不需要提交到公共仓库中,为此git提供了三种实现方式. gitignore文件 在项目的设置中指定排除文件 定义全局.git ...

  9. 1082: [SCOI2005]栅栏

    链接 思路 二分+搜索+剪枝. 首先二分一个答案,表示最多可以切出x块.(一个结论:切出的一定是从较小的前x块.如果一个木材可以满足很多个需要的木材,那么切出最小的,就意味着以后再选时的机会更多.) ...

  10. Maven学习 (五) Elipse中发布一个Maven项目到Tomcat

    对于maven初学者的我,经常遇到一个问题就是,maven项目创建成功后,本来已经添加了jar的依赖,但是发布到Tomcat中就是没有jar包存在, 启动Tomcat总是报没有找到jar包,可项目结构 ...