<!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. Mysql查看锁等信息SQL语句

    查看锁等信息,包括锁信息: select "HOLD:",ph.id h_processid,trh.trx_id h_trx_id,trh.trx_started h_start ...

  2. 解决方法:SQL Server 检测到基于一致性的逻辑 I/O 错误 校验和不正(转载)

    引用:http://luowei1371984.blog.163.com/blog/static/44041589201491844323885/ SQL2008运行select count(*) f ...

  3. Linux编译移植Qt4的环境_在OMAPL138平台

    Linux编译Qt4的环境_OMAPL138 手里有一块创龙OMAPL138的板子,我要在上面成功移植Qt环境和触摸屏幕,这是我第二次进行Linux的Qt环境移植,发现了很多问题,需要重新整理. 我编 ...

  4. Python的循环正确的操作使用方法详解

    要计算1+2+3,我们可以直接写表达式: >>> 1 + 2 + 3 6 要计算1+2+3+...+10,勉强也能写出来. 但是,要计算1+2+3+...+10000,直接写表达式就 ...

  5. perl语言入门总结-第2章

    $what ='steak'; print "fred ate $n ${what}s.\n"; 布尔值 如果是数字0为假, 如果是空字符串''为假, 如果即不是数字也不是字符串, ...

  6. linux c scanf()小解

    今天学习了新的内容,关于c语言的scanf()函数. scanf()函数,读取指定格式的值赋值给相应变量.空格(‘ ‘),回车('\n'),TAB是分隔符,轻易不会被读取.还有,该函数的返回值是正确读 ...

  7. WPF点击不同界面上的按钮实现界面切换

    原文:WPF点击不同界面上的按钮实现界面切换 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_29844879/article/details/ ...

  8. Windows系统搭建Mysql Cluster集群

    简单介绍一下MySQL集群涉及的三种节点:     管理节点(也可以称管理服务器)是整个集群环境的核心,类似于集群中起调度作用的枢纽,由它来负责管理其它节点(数据节点和SQL节点)的开启.关闭或重启某 ...

  9. 剑指Offer - 九度1368 - 二叉树中和为某一值的路径

    剑指Offer - 九度1368 - 二叉树中和为某一值的路径2013-11-23 03:46 题目描述: 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结 ...

  10. 《Cracking the Coding Interview》——第2章：链表——题目2

    2014-03-18 02:24 题目:给定一个单链表,找出倒数第K个节点. 解法:让一个指针先走K步,然后俩指针一起走到尽头.当然也可以先走到尽头数出链表的长度,然后第二次少走K步.其实耗费的工夫是 ...