html5 canvas 控制多個方塊按照不同頻率換色

最簡單的方式：

公司主營業(yè)務(wù)：成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出墨江免費做網(wǎng)站回饋大家。

寫2個定時刷新函數(shù)

setInterval(function(){

//繪制方塊的代碼

},?定時間隔)

下面 舉個栗子^_^

!DOCTYPE?HTML

html

head

meta?content="text/html;?charset=utf-8"?http-equiv="Content-Type"?/

title畫圖實例/title

/head

body

canvas?id="canvas"?width="800"height="600"????

pYour?browserdoes?not?support?the?canvas?element!/p????

/canvas????

script?type="text/javascript"????

window.onload?=?function()?{????

var?canvas?=document.getElementById("canvas");????

var?context2D?=canvas.getContext("2d");

context2D.font?="30px?Times?New?Roman";????

context2D.fillText("HelloCanvas!",?10,?35);????

//500ms一變色的正方形

setInterval(function(){

rect(context2D,1);

},500);??

//300ms一變色的正方形

setInterval(function(){

rect(context2D,2);

},300);

}

/**

*?隨機生成0-255的整數(shù)

**/

function?rnd255(){

return?Math.floor(Math.random()*256);

}

/**

*?繪制隨機顏色的正方形，根據(jù)id確定方位

**/

function?rect(c,id){

var?x,y,w,h;

switch(id){

case?1:

x=10,y=10,w=50,h=50;

break;

case?2:

x=60,y=10,w=50,h=50;

break;

}

c.fillStyle?=?'rgb('+rnd255()+',?'+rnd255()+',?'+rnd255()+')';

c.fillRect(x,y,w,h);

}

/script????

/body

/html

我用前端html5做了一個普通的俄羅斯方塊游戲，想多設(shè)計一個功能：輸入用戶名，然后最后用戶名和得分

那你起碼得搞個后臺 c# java 都是可以的，通過后臺進行寫數(shù)據(jù)到數(shù)據(jù)庫中就好了。

html5常用標記總結(jié)

一、文本標簽

1.1 標題標記：hn align=”對齊方式”標題文本/hn

注意：

1.標題準備了h1----h6的標題，按照字號依次遞減(塊級元素)

2.align表示對齊方式，其值為left,center,right

1.2 字體標記：font face=”字體名稱” size=”字號” color=”字體顏色” 文字/font

注意：中文網(wǎng)頁以黑體，宋體，3號字的效果顯示

1.3 段落標記：p align=”對齊方式” 段落內(nèi)容/p

注意：p可以作為單標記或雙標記：

單標記：段落與上文產(chǎn)生一個空行的間距。

雙標記：段落與上下文之間產(chǎn)生一個空行的間距

1.4 換行標記：

注意：br /表示換行，多次換行多次使用br /

1.5 預(yù)格式化標記：pre...../pre

注意：預(yù)格式化標記可將空格、制表符、回車符等忽略

1.6 轉(zhuǎn)義字符：轉(zhuǎn)義字符讓特殊字符顯示出來。

語法：實體名稱;

二、列表標記

2.1 無序列表

ul type=”列表項的標簽符”

li項目一/li

li項目二/li

li項目三/li

......

/ul

注意： type表示了項目符號：

disc(默認) 實心圓

circle：空心圓

square：實心方塊

2.2 有序列表：

ol type=”列表項的標記符” start=”起始值”

li項目一/li

li項目二/li

li項目三/li

......

/ol

注意：1. 1:1,2,3,.......

a:a,b,c,d,e.......

A:A,B,C,D,E.......

i:i,ii,iii,iv......

I:I,II,III,IV......

2.start表示起始值,從第幾個數(shù)開始計算

2.3 嵌套排列

ol type="1"

lih/li

lit/li

ul type="disc"

lim/li

lil/li

/ul

li5/li

/ol

2.4 分割線標記：hr align=”對齊方式” size=”水平線高度” width=”水平線寬度”

color=”水平線顏色”

三、超鏈接標記

3.1 文本鏈接：a href=”目標URL” target=”目標窗口”指針文本/a

注意： 1.href表示文本鏈接的目標資源的URL

絕對地址和相對地址

絕對地址：在任何情況下都可以找到的地址（例如：網(wǎng)址）

相對地址：必須知道當前所在，才能找到（../表示上一級目錄，/表示下級目錄）例子：../img/baidu.jpg 表示在當前位置的上一層目錄下的img文件夾中的baidu.jpg 文件。

3.2 圖片標記：img src=”圖片文件路徑” alt=”提示文本” height=”圖片高度” width=”圖片寬度”/

3.3 多媒體標記

3.3.1 滾動字幕標記：marquee可以實現(xiàn)文字或圖片的跑馬燈效果

marquee..../marquee

marquee的屬性：

behavior 指定了跑馬燈的效果：scroll(滾動)、slide(滑動)、alternate(交替)

bgcolor:跑馬燈的背景顏色

direction:跑馬燈的移動方向，left（左）、right(右)、up(上)、down(下)

scrolldelay:每次移動的延遲時間，單位毫秒

loop:跑馬燈運行次數(shù)，-1表示無限循環(huán)

height、width

hspace:左右空白寬度

vspace:上下空白寬度

3.3.2 嵌入音樂文件

audio src=”文件地址” 提示文字/audio

3.3.3 嵌入視頻文件

video src=”視頻文件地址” controls=”controls”提示文字/video

四、表格

4.1 表格基本語法：

table

tr

......

td單元格內(nèi)容/td

......

/tr

/table

注意：

table:聲明一個表格對象

tr:聲明一行

td:聲明一個單元格

4.2 表格的基本屬性

1.align 對齊方式：left、center、right

2.border:表格邊框

3.bordercolor:邊框顏色

4.bgcolor:表格背景顏色

5.background:背景圖片

6.height、width

4.3 單元格合并

1.rowspan:所跨的行數(shù)

2.colspan:所跨的列數(shù)

五、表單

5.1 表單標簽：form action=”URL” method=”get|post” target=”...”/form

注意：form：該標記中包含的數(shù)據(jù)將被提交到服務(wù)器或者電子郵件中

action:指定服務(wù)器端處理提交表單信息的程序是什么。URL地址或電子郵件地址

method:get/post:數(shù)據(jù)傳輸?shù)椒?wù)器的傳遞方法

target:服務(wù)器返回文檔結(jié)果的顯示位置：_blank:在新的瀏覽器窗口中打開

_self:在當前瀏覽器中顯示

5.2 表單標記

5.2.1 input標簽：input type=”類型” name=”服務(wù)器 獲取用戶輸入信息的名字” value=”初始值”

注意：1.type類型（輸入類型）:

1. text:單行文本框

2. password:密碼輸入框

3. radio:單選按鈕 checked表示默認

4. checkbox:復(fù)選框 checked表示默認

5. submit:提交按鈕

6. reset:重置按鈕

7. button:普通按鈕

2.maxlength：輸入的最大長度

5.2.2 select標簽

select name=”” size=”” multiple

option value=”選項1” 選項1

.......

option value=”選項n” 選項n

/select

注意：name:服務(wù)器 獲取用戶輸入信息的名字

value ：初始值

option：下拉框的內(nèi)容

multiple:多選，若沒有multiple則是單選

selected:表示默認選項

size:表示長度

5.2.3 textarea 標簽：textarea name=”...” cols=”...” rows=”...” wrap=”off/virtual/physical”

/textarea

注意: name：多行文本框的名稱

cols：一行可容納的字符數(shù)

rows：表示可顯示額的行數(shù)

wrap:virtual和phycal控制自動換行

如何用Adobe Edge做一個最簡單的HTML5動畫

以下就以做一個最簡單的方塊動畫來說明基本用法：

1. 使用方塊工具在stage上畫一個方塊, 順便將前景色選為藍色

　2. 我們目標是讓方塊移動到右下角, 在移動過程中改變它的透明度 和 旋轉(zhuǎn)角度

所以我們先要對這幾個參數(shù)建立關(guān)鍵幀

右擊方塊, 在彈出菜單中選擇 Add Keyframe - Opacity

3. 然后我們在下方的Timeline面板中將初始的透明度修改為20

4. 然后我們將右邊的時間浮標拖動到一個隨意的時間點, 點擊透明度修改框右邊的小按鈕, 再次創(chuàng)建一個關(guān)鍵幀

5. 創(chuàng)建完第二個關(guān)鍵幀后, 我們再對透明度進行修改, 改為100

此時能夠發(fā)現(xiàn)在兩個時間點的關(guān)鍵幀直接出現(xiàn)了淡黃色填充條, 代表這里已經(jīng)存在一個變化的過程了, 我們此時可以點擊Play按鈕試一下

6. 如法炮制, 我們可以再添加一個旋轉(zhuǎn)的動畫, 只要右擊選擇Add Keyframe- Rotate (或者直接在左邊修改Rotate值也可以)

注意一定要保證你運行動畫的兩端時間點都有關(guān)鍵幀, 關(guān)鍵幀通過點擊屬性修改框右邊的菱形按鈕添加

7. 此時應(yīng)該可以運行2個動畫了, 按play鍵試試唄~

接下來我們可以對這個矩形再添加一個簡單的事件, 比如鼠標單擊時使動畫回放

我們需要在右上角的Elements菜單中找到Rectangle, 點擊左邊的Open Actions添加事件處理程序

8. 選擇Click事件

9. 在代碼編輯框中選擇右邊的Play Reverse選項添加回放的功能. (當然你也可以自己編寫自己的代碼)

10. 編輯完畢后直接關(guān)閉即可, 由于在編輯窗口中無法直接響應(yīng)點擊事件, 我們需要保存為HTML文件在瀏覽器中進行試驗

點擊左上角File-Save as 保存為HTML文件

11. 我們可以發(fā)現(xiàn)它生成了好多JS文件

其中edge_includes文件夾中存放了JQuery庫的文件以及Edge的共用JS庫文件

其余js文件則是當前頁面所需要的js文件

12. 直接用支持HTML5的瀏覽器打開HTML文件, 就可以看到效果啦~！

網(wǎng)站標題：html5方塊,html5方框
網(wǎng)站URL：http://aaarwkj.com/article16/dssgegg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、Google、標簽優(yōu)化、網(wǎng)站排名、網(wǎng)站收錄、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)