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

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

用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='http://doc.xuehai.net/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);