canvas畫一顆星星：

規則的星星有內切圓和外切圓，每兩個點之間的角度是固定的，因此可得到星星的每個點的坐標，畫出星星。

function drawStars(x,y,radius1,radius2,num,drawType,color){

var angle = 360/(num*2);

var arr = [];

for(var i=0;i

var starObj = {};

if(i%2==0){

starObj.x = x+radius1*Math.cos(i*angle*Math.PI/180);

starObj.y = y+radius1*Math.sin(i*angle*Math.PI/180);

}else{

starObj.x = x+radius2*Math.cos(i*angle*Math.PI/180);

starObj.y = y+radius2*Math.sin(i*angle*Math.PI/180);

}

arr.push(starObj);

}

cxt.beginPath();

cxt.fillStyle=color;

cxt.strokeStyle = color;

cxt.moveTo(arr[0].x,arr[0].y);

for(var i=1;i

cxt.lineTo(arr[i].x,arr[i].y);

}

cxt.closePath();

if(drawType=="fill"){

cxt.fill();

}else{

cxt.stroke();

}

}

給星星添加隨機屬性：

var starArr=[]; //多個星星對象

for(var i=0;i<5;i++){

var starObj={

radius1:10+5*Math.random(),

radius2:2+4*Math.random(),

x:30+(canvas.width-60)*Math.random(),

y:30+(canvas.height-60)*Math.random(),

num:4,

angle:360*Math.random(),

changeAngle:-5+10*Math.random(),

color:"rgb("+parseInt(255*Math.random())+","+parseInt(255*Math.random())+","+parseInt(255*Math.random())+")"

}

starArr.push(starObj);

}

隨機產生星星并添加動畫(閃爍、旋轉等)：

setInterval(function(){

cxt.clearRect(0,0,500,500);

for(var i=0;i

starArr[i].angle+=starArr[i].changeAngle;

cxt.save();

cxt.beginPath();

cxt.translate(starArr[i].x, starArr[i].y);

cxt.rotate(starArr[i].angle * Math.PI / 180);

cxt.scale(Math.sin(starArr[i].angle * Math.PI / 180), Math.sin(starArr[i].angle * Math.PI / 180));

cxt.globalAlpha = Math.abs(Math.sin(starArr[i].angle * Math.PI / 180));

drawStars(0,0,starArr[i].radius1, starArr[i].radius2, starArr[i].num, "fill", "white");

cxt.restore();

}

},30);

到此，隨機產生有動畫的星星就完了。

下面還補充點，當我在angular中使用canvas畫星星時，我的做法時window.οnlοad=function(canvas())，FF等均正常，在IE9中報錯，canvas.getContext('2d')為null，不知道是什么原因，我在directive中用canvas，canvas.getContext('2d')不為null，但是沒法畫出星星，沒找到原因，最后曲線救國。。在canvas下加了個隱藏的圖片，圖片的onload執行canvas()，夠曲折的方法，如果有更好的方法或是知道原因的，歡迎留言提供，不甚感激。

canvas畫隨機的四位驗證碼

效果圖如下:

使用javascript和canvas畫月半彎

使用javascript和canvas畫月半彎,月半彎好浪漫!瀏覽器須支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代碼:

櫻花的季節，教大家用canvas畫出飛舞的櫻花樹

又到了櫻花的季節,教大家使用canvas畫出飛舞的櫻花樹效果. 廢話少說,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我們先畫出一棵 ...

撩妹技能 get，教你用 canvas 畫一場流星雨

開始 妹子都喜歡流星,如果她說不喜歡,那她一定是一個假妹子. 現在就一起來做一場流星雨,用程序員的野路子浪漫一下. 要畫一場流星雨,首先,自然我們要會畫一顆流星. 玩過 canvas 的同學,你畫圓畫 ...

canvas 畫圈 demo

html代碼:

踩個猴尾不容易啊 Canvas畫個猴子

踩個猴尾不容易啊??Canvas畫個猴子

Canvas畫橢圓的方法

雖然標題是畫橢圓,但是我們先來說說Canvas中的圓 相信大家對于Canvas畫圓都不陌生 ? oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

隨機推薦

Java基礎-ArrayList和LinkedList的區別

大致區別:? 1.ArrayList是實現了基于動態數組的數據結構,LinkedList基于鏈表的數據結構. 2.對于隨機訪問get和set,ArrayList覺得優于LinkedList,因為Lin ...

Leetcode&colon; Data Stream as Disjoint Intervals &amp&semi;&amp&semi; Summary of TreeMap

Given a data stream input of non-negative integers a1, a2, ..., an, ..., summarize the numbers seen ...

&period;NET開源工作流RoadFlow-系統布署及注意事項

非常感謝您在百忙之中抽空來了解RoadFlow,下面我們說一下如果在自己本地搭建環境吧. 1.環境要求 數據庫:sqlserver2005以上版本.服務器:IIS6.0以上,或iisexpress.d ...

UI：自定義鍵盤的實現

自定義我的封裝鍵盤,并在試圖控制器里對接 (解決多 輸入框問題,把輸入框存入到可變數組) @implementation AppDelegate - (BOOL)application:(UIAppl ...

bootstrap&plus;masonry&period;js寫瀑布流

最近在用bootstrap寫一個網站,其中有個圖文展示的頁面要用到瀑布流的效果.因為項目要求,項目要以bootstrap為基準,不準私自添加內聯樣式.內部樣式,所以,自己寫瀑布流就不行了,所以,根據要 ...

Unity進階----Lua語言知識點&lpar;2018&sol;11&sol;08&rpar;

國內開發: 敏捷開發: 集中精力加班堆出來第一個版本 基本沒啥大的bug 國外開發: 1).需求分析: 2).討論 3).分模塊 4).框架 5).畫UML圖(類圖class function)(e- ...

好用的漂浮廣告 jquery

這是我之前準備找工作時看一書做的筆記,都是一些筆試面試中常考的重點難點問題,但比較基礎,適合初學者看. 1. char c = '\72'; 中的\72代表一個字符, ...

總結

以上是生活随笔為你收集整理的java随机星星怎么闪_canvas画随机闪烁的星星的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。