HTML5绘制星空

2024-09-05 12:19:04

字体：大中小

来源：转载

供稿：网友

HTML5绘制一个很丑的星空，是一个Canvas实例，美工不太好，只能这样了，主要是演示下HTML5中如何制作一些Canvas的例子，对HTML5有兴趣的不妨研究下实现的方法和代码。

<!doctype html><html lang="en"><head><title>HTML5绘制一个很丑的星空</title><style>canvas{display: block;border:1px dotted skyblue;}</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='/jscss/demoimg/201401/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="15px 微软雅黑"			nimo.context.fillText('月亮啊月亮，我知道你很丑，但很温柔！~!',100,100)//设置文字及在图片上的位置	}}</script></body></html>

上一篇：CSS3 transform-style 3D旋转特效

下一篇：HTML5 Canvas 鼠标绘制圆形

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注