1、接著學(xué)習(xí)使用一些JavaScript庫(kù)，比如Jquery是大部分Web開(kāi)發(fā)人員都喜歡用的，通過(guò)Jquery可以有效的提高JavaScript的開(kāi)發(fā)效率三學(xué)習(xí)Web前端核心 學(xué)習(xí)Jquery之后，大家就要學(xué)習(xí)HTML5高級(jí)階段HTML5Canvas繪圖HTML5SVG音頻和視頻；1首先，創(chuàng)建一個(gè)新的html文件，簡(jiǎn)單地重置樣式，添加畫(huà)布，并給畫(huà)布一個(gè)紅色背景2這里是用jquery寫(xiě)的，先介紹一下jquery，可以看到canvas默認(rèn)的畫(huà)布大小是300*1503寫(xiě)resizeCnavas方法，動(dòng)態(tài)獲取和改變畫(huà)布的大小4；var myCarvas=documentgetElementById#39mycarvas#39mycarvas畫(huà)布的id var ctx=myCarvasgetContext#392d#39繪制矩形 ctxbeginPathctxfillStyle=#39#ff0000#39填充顏色 ctxfillRect5，5，100，100填充；*本示例使用jQuery描述* varcanvas=$#myCanvas選擇要擦除的畫(huà)布元素 varcontext=canvasget0getcontext2d獲取畫(huà)布上下文 第一個(gè)方法擦除clearRect方法contextclearRect0，0，canvaswidthcanvas。

2、1HTML5 Canvas實(shí)現(xiàn)會(huì)跳舞的時(shí)間動(dòng)畫(huà)這款HTML5動(dòng)畫(huà)非常有意思，首先它的原型是一個(gè)時(shí)鐘，但是canvas技術(shù)的使用，讓這個(gè)時(shí)鐘沒(méi)走動(dòng)一秒都會(huì)產(chǎn)生圓球散落的動(dòng)畫(huà)特效，非常的酷在線(xiàn)演示源碼下載2CSS3 3D折疊翻轉(zhuǎn)文字動(dòng)畫(huà)這個(gè)C；5必須要用到Canvas嗎 當(dāng)然不是，我們通常所說(shuō)的HTML5實(shí)際上包含了5， css3， javascript在內(nèi)的一系列技術(shù)，用于開(kāi)發(fā)HTML應(yīng)用這個(gè)跟你是否使用canvas沒(méi)有必然的關(guān)系 學(xué)HTML5必須要學(xué)JS嗎 學(xué)習(xí)5的話(huà)，如果你是想作為；HTML5 Canvas基礎(chǔ)教程從HTML5和JavaScript以及jQuery的基礎(chǔ)知識(shí)講起，全面介紹了HTML5 Canvas的各種特性，包括渲染上下文坐標(biāo)系統(tǒng)繪制圖形保存和恢復(fù)畫(huà)布狀態(tài)，以及變形合成處理圖像和視頻等，讓讀者對(duì)Canvas建立；1canvas繪制矩形 lt！DOCTYPE htmllthtmllthead lang=quotenquot ltmeta charset=quotUTF8quot lttitlecanvas繪制矩形lttitle ltscript type=quottextjavascriptquot src=quotcanvas2jsquotltscript ltstyle type=quottext；可以用JS監(jiān)控屏幕大小，然后調(diào)整Canvas的大小在代碼中加入JS windowresizeresizeCanvas function resizeCanvas canvasattrquotwidthquot， $windowget0innerWidth canvasattrquotheightquot， $window。

3、下面這個(gè)是主要代碼了jqueryltscript 判斷瀏覽器是否支持HTML5 Canvas windowonload = function try 動(dòng)態(tài)創(chuàng)建一個(gè)canvas元 ，并獲取他2Dcontext如果出現(xiàn)異常則表示不支持 documentcreateElementquotc；ltspan style=quotfontsize18pxquotlt！DOCTYPE html lthead ltmeta charset=utf8 lttitlePHP100 HTML5視頻教程canvas吹氣球效果lttitle ltscript src=quotjquery171；HTML5用canvas實(shí)現(xiàn)動(dòng)畫(huà)效果的方法lt！DOCTYPE HTML lthtml lthead ltstyle body margin 0pxpadding 0px ltstyle lthead ltbody ltcanvas id=quotmyCanvasquot width=quot578quot height=quot200quotltcanvas lt。

4、我們可以將上面的代碼加入windowonload，或者jQuery的ready方法里，當(dāng)文檔加載完，將會(huì)創(chuàng)建文明的圖形一些HTML5 canvas 圖像解決方案 用與HTML5 Canvas元素你可以開(kāi)發(fā)動(dòng)態(tài)繪圖對(duì)象比如如可視化信息或數(shù)據(jù)圖HTML5 canvas 可以；比如有一個(gè) 元素，可以直接用jquery增加click事件$#39#p1#39clickfunctionhellipquot然而這種DOM處理方法在HTML5的Canvas里不再適用，Canvas使用的是另外一套機(jī)制，無(wú)論在Canvas上繪制多少圖形，Canvas都是一個(gè)整體。

5、使用HTML5畫(huà)布canvas能夠快速實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)效果，基本原理如下每隔一定時(shí)間繪制圖形并且清除圖形，用來(lái)模擬出一個(gè)動(dòng)畫(huà)過(guò)程，可以使用contextclearRect0， 0， x， y方法來(lái)刷新需要繪制的圖形 首先是繪制圖形的方法，如下fu。