用代码绘制一个星空图-网站源码-阿奇资源网

用代码绘制一个星空图

标签:

源码
主机名米
<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>一个星空特效图</title>
 <style>
canvas{
 display: block;border:1px dotted skyblue;
}
 body{
  font-family: 微软雅黑;
 }

 </style>
</head>
<body>
 <h1>一个星空特效图</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="https://www.zjimmi.com/">js.alixixi.com</a>
</p>
</body>
</html>
 
直接丢到主机里面就能看到效果了

		
		                
本文最后更新于2018-5-29,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
AD:【站长导航交流群:611429381】点击加入群聊【站长导航资源交流】
分享到:
打赏
未经许可不得转载:
①若无特殊注明,本文来自阿奇资源网,由用户钰君发布,转载请保留文章出处。
②转载注明:超链接形式并注明出处主机名米网《用代码绘制一个星空图》
③免责声明:主机名米网的资源部分来源于网络,如有侵权,请联系站长进行删除处理。

评论

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

用代码绘制一个星空图

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏