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

<!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://js.alixixi.com/">js.alixixi.com</a>
</p>
</body>
</html>

转载于:https://www.cnblogs.com/suway/p/6681892.html

用HTML5绘制的一个星空特效图相关推荐

根据卫星仰角和方位角使用html5绘制天空图（投影图）
本文记录根据卫星仰角和方位角使用html5绘制天空图(投影图). 也就是根据这两个角度绘制坐标点在圆形上的投影. 术语: 方位角:从标准方向的北端起,顺时针方向到直线的水平角称为该直线的方位角.方位角 ...
html星空代码在线,HTML5特效库 HTML5+JS全屏星空特效源码
效果图各位长友大家早上好! 今天给各位带来的是 HTML5+JS全屏星空特效源码! 有想要文件版源码的可以私聊小编哦! 废话不多说,上源码! CSS: body {margin:0 auto;ove ...
Canvas小demo(直线和曲线绘制出一个星空，月亮，绿地)
主要包含的知识点: 直线绘制径向渐变(绘制天空井深的情况,由蓝变黑) 五角星数学知识,点与点之间的角度为72deg... 图形变换与状态保存弧线绘制月亮(arc,arcTo) 贝塞尔曲线绘制绿地( ...
html5 绘制图形,HTML5绘制几何图形
绘制几何图形 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext(" ...
HTML 星空动图背景（canvas+JS）
HTML 星空动图背景(canvas+JS) 前几天看项目的时候看到一个星空动图,当时还以为是拿了一张GIF做背景,结果看代码找半天没找到,后来仔细阅读代码才发现原来是用canvas和JS做的,然后我 ...
『 canvas 特效』一文教你绘制绚丽的星空背景 TS + ES6
介绍很久没有写关于 canvas 效果的文章了,刚好最近又学到了一个新的特效,使用 canvas 绘制多层次动态星空背景,今天就分享给大家.首先我们依旧来看一下最终实现的效果,如图所示: 由于录制 ...
html设计一个图片墙,html5 绘制类似墙型的背景
最近开发的项目中要使用html5绘制各种虚线包括贝塞尔虚线.圆形虚线.各种虚线段,还包括各种形式的背景墙,截图如下: 从这张图片中可以看出有很多种形式的虚线和背景墙,下面主要介绍一下墙型背景,如下如: ...
羡慕大劳星空顶？不如跟我一起使用 Jetpack compose 绘制一个星空背景（带流星动画）
前言背景作为一个自诩的电影爱好者,经常会在半夜看电影,看完后就会顺道去豆瓣标记一下看过,再看看别人对这个电影的理解. 某日深夜,看完电影后,顺手打开了豆瓣的书影音记录这个功能,起初并没有注意到 ...
html制作星空,HTML5绘制星空
HTML5绘制一个很丑的星空 canvas{display: block;border:1px dotted skyblue;} HTML5绘制星空 var nimo={}; window.οnlοa ...

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

用HTML5绘制的一个星空特效图相关推荐

最新文章

热门文章