canvas画一颗星星:
规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星。
1 function drawStars(x,y,radius1,radius2,num,drawType,color){ 2 var angle = 360/(num*2); 3 var arr = []; 4 for(var i=0;i<num*2;i++){ 5 var starObj = {}; 6 if(i%2==0){ 7 starObj.x = x+radius1*Math.cos(i*angle*Math.PI/180); 8 starObj.y = y+radius1*Math.sin(i*angle*Math.PI/180); 9 }else{ 10 starObj.x = x+radius2*Math.cos(i*angle*Math.PI/180); 11 starObj.y = y+radius2*Math.sin(i*angle*Math.PI/180); 12 } 13 arr.push(starObj); 14 } 15 16 cxt.beginPath(); 17 cxt.fillStyle=color; 18 cxt.strokeStyle = color; 19 cxt.moveTo(arr[0].x,arr[0].y); 20 for(var i=1;i<arr.length;i++){ 21 cxt.lineTo(arr[i].x,arr[i].y); 22 } 23 cxt.closePath(); 24 if(drawType=="fill"){ 25 cxt.fill(); 26 }else{ 27 cxt.stroke(); 28 } 29 }
给星星添加随机属性:
1 var starArr=[]; //多个星星对象 2 for(var i=0;i<5;i++){ 3 var starObj={ 4 radius1:10+5*Math.random(), 5 radius2:2+4*Math.random(), 6 x:30+(canvas.width-60)*Math.random(), 7 y:30+(canvas.height-60)*Math.random(), 8 num:4, 9 angle:360*Math.random(), 10 changeAngle:-5+10*Math.random(), 11 color:"rgb("+parseInt(255*Math.random())+","+parseInt(255*Math.random())+","+parseInt(255*Math.random())+")" 12 } 13 starArr.push(starObj); 14 }
随机产生星星并添加动画(闪烁、旋转等):
1 setInterval(function(){ 2 cxt.clearRect(0,0,500,500); 3 for(var i=0;i<starArr.length;i++) { 4 starArr[i].angle+=starArr[i].changeAngle; 5 cxt.save(); 6 cxt.beginPath(); 7 cxt.translate(starArr[i].x, starArr[i].y); 8 cxt.rotate(starArr[i].angle * Math.PI / 180); 9 cxt.scale(Math.sin(starArr[i].angle * Math.PI / 180), Math.sin(starArr[i].angle * Math.PI / 180)); 10 cxt.globalAlpha = Math.abs(Math.sin(starArr[i].angle * Math.PI / 180)); 11 drawStars(0,0,starArr[i].radius1, starArr[i].radius2, starArr[i].num, "fill", "white"); 12 cxt.restore(); 13 } 14 },30);
到此,随机产生有动画的星星就完了。
下面还补充点,当我在angular中使用canvas画星星时,我的做法时window.onload=function(canvas()),FF等均正常,在IE9中报错,canvas.getContext(‘2d‘)为null,不知道是什么原因,我在directive中用canvas,canvas.getContext(‘2d‘)不为null,但是没法画出星星,没找到原因,最后曲线救国。。在canvas下加了个隐藏的图片,图片的onload执行canvas(),够曲折的方法,如果有更好的方法或是知道原因的,欢迎留言提供,不甚感激。
时间: 2024-10-13 04:21:36