用HTML5绘制的一个星空特效图

发布时间：2014-07-24 11:32:18　来源/作者：学技巧网页制作　分类：图片特效阅读：0次点评一下

<!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="500" height="400"> </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(0,0,nimo.canvas.width,nimo.canvas.height); nimo.context.fillStyle=nimo.statBg; nimo.context.fill(); //绘制月亮轮廓 nimo.context.beginPath(); nimo.context.arc(200,200,100,0.6*Math.PI,1.3*Math.PI); nimo.context.bezierCurveTo(140,119,93,224,169,295) //填充月亮轮廓和设置投影 nimo.context.shadowColor="blue"; nimo.context.shadowBlur=3; nimo.context.strokeStyle="blue"; nimo.context.stroke(); //填充放射渐变给月亮 nimo.radialGradient=nimo.context.createRadialGradient(150,200,0,150,200,50); nimo.radialGradient.addColorStop(0,'white') nimo.radialGradient.addColorStop(1,'#999') nimo.context.fillStyle=nimo.radialGradient; nimo.context.fill() //绘制月亮的研究和嘴巴 nimo.context.shadowColor="white"; nimo.context.beginPath(); nimo.context.moveTo(110,173); nimo.context.lineTo(114,173); nimo.context.moveTo(119,173); nimo.context.lineTo(123,173); nimo.context.stroke(); nimo.context.beginPath(); nimo.context.arc(116,183,2,0,2*Math.PI); nimo.context.stroke(); nimo.context.shadowColor='transparent'; nimo.context.font="14px 微软雅黑" nimo.context.fillText('好挫的月亮!',300,300) } } </script> <p> demo by <a href="http://www.xuejiqiao.com/">www.xuejiqiao.com</a> </p> </body> </html>

(www.xuejiqiao.com)提示：可修改后再运行代码!

HTML5应用越来越广泛，下面是一个HTML5学习例子，如何绘制的一个星空特效图。

如果无法加载效果，先停止浏览器的加载，然后在刷新ok。

本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！

学技巧网站制作

用HTML5绘制的一个星空特效图

JS实现鼠标点亮或熄灭灯泡特效

非常适合商品宣传的jquery幻灯切换特效

仿淘宝商品宝贝图片放大效果js特效