脚本代码(For )如下:

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

canvas{

display: block;border:1px dotted skyblue;

}

body{

font-family: 微软雅黑;

}

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

var nimo={};

window.οnlοad=function(){

nimo.canvas=document.getElementById('canvas');

nimo.context=nimo.canvas.getContext('2d');

nimo.starBgImg=new Image();

nimo.starBgImg.src='/uploads/rs/167/znddwgfj/star-bg.jpg';

nimo.starBgImg.οnlοad=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)

}

}

demo by