亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

HTML5 canvas 基礎(chǔ)入門(mén)教程

系統(tǒng) 2497 0
HTML5 canvas 即HTML5畫(huà)布,是一個(gè)現(xiàn)代瀏覽器都支持的HTML5非插件繪圖的功能,本文將展示如何通過(guò)HTML5 canvas API操作canvas元素、繪制圖形、改變繪圖顏色以及刪除圖形,讓我們開(kāi)始進(jìn)入這很酷的新技術(shù)的短暫旅行吧。

canvas元素簡(jiǎn)介

canvas元素簡(jiǎn)介

使用canvas元素相當(dāng)簡(jiǎn)單,它只是一個(gè)單純的HTML標(biāo)簽,外加寬高兩個(gè)特性。

            
              <canvas
            
            
            
            
              width
            
            
              =
            
            
              "500"
            
            
            
            
              height
            
            
              =
            
            
              "500"
            
            
              >
            
            
            
            
              <!-- 在這里插入向后兼容的內(nèi)容,不支持canvas的瀏覽器可以解析和顯示 -->
            
            
            
            
              </canvas>
            
          

上面的代碼在頁(yè)面中插入了一個(gè)透明的畫(huà)布,canvas元素內(nèi)部的內(nèi)容可以在不支持canvas功能的瀏覽器下顯示你想給你的用戶(hù)提供的信息,聯(lián)想下<noscript>元素就可以。

添加評(píng)論 ? 一回 ? 2011-02-14 22:27

瀏覽器支持

瀏覽器支持

很重要的一點(diǎn)就是瀏覽器對(duì)canvas的支持還是相當(dāng)不錯(cuò)的,所有現(xiàn)代瀏覽器都支持它,包括最新版的IE9:

            
              Internet
            
            
            
            
              Explorer
            
            
            
            
              9.0
            
            
              +
            
            
            
            
              Safari
            
            
            
            
              3.0
            
            
              +
            
            
            
            
              Firefox
            
            
            
            
              3.0
            
            
              +
            
            
            
            
              Chrome
            
            
            
            
              3.0
            
            
              +
            
            
            
            
              Opera
            
            
            
            
              10.0
            
            
              +
            
            
              
iOS 
            
            
              1.0
            
            
              +
            
            
            
            
              Android
            
            
            
            
              1.0
            
            
              +
            
          

有趣的是,你可以在IE8以及更低版本的IE瀏覽器下使用canvas功能,借助 ExplorerCanvas 插件 。

添加評(píng)論 ? 一回 ? 2012-03-23 16:38

畫(huà)布尺寸

畫(huà)布尺寸

當(dāng)定義canvas元素的尺寸時(shí),最好通過(guò)HTML設(shè)置它的width和height特性,因?yàn)橥ㄟ^(guò)CSS設(shè)置寬高會(huì)導(dǎo)致畫(huà)布按比例縮放到你設(shè)置的值,這背后有它的邏輯原因:在canvas元素的內(nèi)部存在一個(gè)名為2d渲染環(huán)境(2d redering context)的對(duì)象,所以,通過(guò)CSS設(shè)置畫(huà)布尺寸會(huì)引起奇怪的效果。

添加評(píng)論 ? 一回 ? 2012-03-23 16:38

探索2d渲染環(huán)境

探索2d 渲染環(huán)境

我們上面提到的canvas元素只是canvas功能的一部分,另一部分是2d渲染環(huán)境,它可以讓你實(shí)現(xiàn)很酷的看得到的東西。

需要完全理清的是:當(dāng)你使用canvas,你不是在canvas元素上畫(huà)圖,事實(shí)上你是在canvas元素內(nèi)部的2d渲染環(huán)境上。

添加評(píng)論 ? 一回 ? 2012-03-23 16:39

坐標(biāo)系統(tǒng)

坐標(biāo)系統(tǒng)

如果你曾經(jīng)使用過(guò)2d繪圖編程語(yǔ)言(比如ActionScript、Processing等),你應(yīng)該會(huì)了解基于屏幕(screen-based)的坐標(biāo)系統(tǒng)。canvas內(nèi)部的2d渲染環(huán)境并沒(méi)有什么不同之處,它采用標(biāo)準(zhǔn)的笛卡爾坐標(biāo)系統(tǒng),原點(diǎn)位于屏幕左上角,向右移動(dòng)會(huì)增加x坐標(biāo)的值,向下移動(dòng)會(huì)增加y坐標(biāo)的值,很容易理解。

通常坐標(biāo)系統(tǒng)的單位是屏幕的1像素。

添加評(píng)論 ? 一回 ? 2012-03-23 16:39

操作2d渲染環(huán)境

操作2d渲染環(huán)境

需要利用Javascript提供的API來(lái)獲取2d渲染環(huán)境對(duì)象,該方法為:getContext(),看下簡(jiǎn)單的例子:

            
              <canvas
            
            
            
            
              id
            
            
              =
            
            
              "csser-com-Canvas"
            
            
            
            
              width
            
            
              =
            
            
              "500"
            
            
            
            
              height
            
            
              =
            
            
              "500"
            
            
              >
            
            
            
            
              <!-- 向后兼容的內(nèi)容 -->
            
            
            
            
              </canvas>
            
            
            
            
              <script>
            
            
            
            
              var
            
            
               canvas 
            
            
              =
            
            
               document
            
            
              .
            
            
              getElementById
            
            
              (
            
            
              "csser-com-Canvas"
            
            
              );
            
            
            
            
              var
            
            
               c 
            
            
              =
            
            
               canvas
            
            
              .
            
            
              getContext
            
            
              (
            
            
              "2d"
            
            
              );
            
            
            
            
              </script>
            
          

通過(guò)調(diào)用canvas對(duì)象的getContext()方法,c變量就包含了指向2d渲染環(huán)境的引用,這意味著你現(xiàn)在已經(jīng)完成了在畫(huà)布上繪圖的一切準(zhǔn)備,接下來(lái)可以開(kāi)始繪圖了。

添加評(píng)論 ? 一回 ? 2012-03-23 16:39

繪制矩形

繪制矩形

獲得了2d渲染環(huán)境對(duì)象,就可以通過(guò)調(diào)用API提供的大量方法來(lái)進(jìn)行繪圖了,一個(gè)最基本的方法就是fillRect(),通過(guò)它可以繪制一個(gè)填充顏色的矩形(顏色默認(rèn)值為黑色)。

在c變量的下面增加以下代碼:

            
              c
            
            
              .
            
            
              fillRect
            
            
              (
            
            
              0
            
            
              ,
            
            
            
            
              0
            
            
              ,
            
            
            
            
              50
            
            
              ,
            
            
            
            
              50
            
            
              );
            
          

這將在畫(huà)布左上角繪制繪制一個(gè)黑色背景的正方形:

在調(diào)用fillRect()方法時(shí)傳入了4個(gè)參數(shù):

  • 第一個(gè)是基于原點(diǎn)的x坐標(biāo)位置
  • 第二個(gè)是基于原點(diǎn)的y坐標(biāo)位置
  • 第三個(gè)是寬度
  • 第四個(gè)是高度

fillRect的偽代碼看起來(lái)應(yīng)該像這個(gè)樣子:

            
              c
            
            
              .
            
            
              fillRect
            
            
              (
            
            
              x
            
            
              ,
            
            
               y
            
            
              ,
            
            
               width
            
            
              ,
            
            
               height
            
            
              );
            
          

很酷的是,不僅可以繪制填充的矩形,你還可以繪制線(xiàn)框矩形,使用strokeRect()方法,繪制四周產(chǎn)生描邊效果的矩形,如:

            
              c
            
            
              .
            
            
              strokeRect
            
            
              (
            
            
              50
            
            
              ,
            
            
            
            
              50
            
            
              ,
            
            
            
            
              100
            
            
              ,
            
            
            
            
              100
            
            
              );
            
          

strokeRect的參數(shù)與fillRect是一致的,繪制的結(jié)果如下:

利用canvas繪圖,簡(jiǎn)單、優(yōu)美,所有的方法都很易懂,但是當(dāng)放在一起使用可以讓你畫(huà)出很漂亮的圖形。

添加評(píng)論 ? 一回 ? 2012-03-23 16:40

繪制路徑

繪制路徑

矩形是唯一一個(gè)可以通過(guò)單個(gè)API方法繪制的圖形,先把它放在一邊,我們來(lái)學(xué)習(xí)下路徑(Paths)繪制。使用路徑,可以繪制線(xiàn)條、連續(xù)的曲線(xiàn)以及復(fù)合圖形。

繪制一個(gè)簡(jiǎn)單的路徑需要利用一些AIP方法:

            
              beginPath 
            
            
              開(kāi)始一個(gè)新路徑
            
            
              
moveTo 
            
            
              移動(dòng)路徑的繪圖起點(diǎn)
            
            
              
lineTo 
            
            
            
              moveTo
            
            
              定義的點(diǎn)開(kāi)始繪制連續(xù)的路徑,或者從上一次的
            
            
              lineTo
            
            
              的終點(diǎn)開(kāi)始繪制。
            
            
              
closePath 
            
            
              連接最后的點(diǎn)和最初的點(diǎn)并關(guān)閉路徑繪制
            
            
              
fill 
            
            
              用顏色填充路徑
            
            
              
stroke 
            
            
              描變路徑
            
          

嘗試執(zhí)行下面的代碼:

            
              c
            
            
              .
            
            
              beginPath
            
            
              ();
            
            
              
c
            
            
              .
            
            
              moveTo
            
            
              (
            
            
              50
            
            
              ,
            
            
            
            
              50
            
            
              );
            
            
              
c
            
            
              .
            
            
              lineTo
            
            
              (
            
            
              50
            
            
              ,
            
            
            
            
              250
            
            
              );
            
            
              
c
            
            
              .
            
            
              lineTo
            
            
              (
            
            
              250
            
            
              ,
            
            
            
            
              250
            
            
              );
            
            
              
c
            
            
              .
            
            
              closePath
            
            
              ;
            
            
              
c
            
            
              .
            
            
              fill
            
            
              ();
            
          

執(zhí)行結(jié)果為:

你可以用同樣的方法繪制你希望的圖形,canvas還包含更高級(jí)的路徑繪制,比如圓?。梢岳L制圓形)和貝塞爾曲線(xiàn)(用于繪制很酷的曲線(xiàn)效果),總之,繪制路徑要比繪制矩形復(fù)雜的多。

添加評(píng)論 ? 一回 ? 2012-03-23 16:40

改變顏色

改變顏色

到目前為止,我們的示例所繪制的都是填充或描邊的黑色,canvas也提供了一些屬性用于改變繪制圖形的顏色,它們是fillStyle和strokeStyle,它們的語(yǔ)法都是可以自解釋的,所以我們直接來(lái)改變一個(gè)矩形的填充顏色:

            
              c
            
            
              .
            
            
              fillStyle 
            
            
              =
            
            
            
            
              "rgb(255, 0, 0)"
            
            
              ;
            
            
              
c
            
            
              .
            
            
              fillRect
            
            
              (
            
            
              50
            
            
              ,
            
            
            
            
              50
            
            
              ,
            
            
            
            
              100
            
            
              ,
            
            
            
            
              100
            
            
              );
            
          

結(jié)果:

或者,你可以改變描邊的顏色:

            
              c
            
            
              .
            
            
              strokeStyle 
            
            
              =
            
            
            
            
              "rgb(255, 0, 0)"
            
            
              ;
            
            
              
c
            
            
              .
            
            
              strokeRect
            
            
              (
            
            
              50
            
            
              ,
            
            
            
            
              50
            
            
              ,
            
            
            
            
              100
            
            
              ,
            
            
            
            
              100
            
            
              );
            
          

結(jié)果:

fillStyle和strokeStyle屬性很漂亮的一點(diǎn)就是,它們都支持普通CSS顏色值,這意味著你可以使用RGB、RGBA、HSA、顏色名稱(chēng)以及十六進(jìn)制顏色值。

還有一點(diǎn)需要指出的是,改變畫(huà)布中的顏色值不會(huì)影響已經(jīng)繪制的任何圖形,例如,如果你繪制了一個(gè)黑色的矩形,然后設(shè)置填充為紅色,接著繪制了另一個(gè)矩形,這時(shí)第一個(gè)矩形仍然為黑色。

添加評(píng)論 ? 一回 ? 2012-03-23 16:40

改變線(xiàn)寬

改變線(xiàn)寬

除了可以改變顏色,還可以利用lineWidth屬性改變描邊線(xiàn)條的寬度,按照上面的例子,改變線(xiàn)條寬度:

            
              c
            
            
              .
            
            
              lineWidth 
            
            
              =
            
            
            
            
              20
            
            
              ;
            
            
              
c
            
            
              .
            
            
              strokeStyle 
            
            
              =
            
            
            
            
              "#f00"
            
            
              ;
            
            
              
c
            
            
              .
            
            
              strokeRect
            
            
              (
            
            
              50
            
            
              ,
            
            
            
            
              50
            
            
              ,
            
            
            
            
              100
            
            
              ,
            
            
            
            
              100
            
            
              );
            
          

結(jié)果:

同樣的可以改變路徑的線(xiàn)寬:

            
              c
            
            
              .
            
            
              lineWidth 
            
            
              =
            
            
            
            
              20
            
            
              ;
            
            
              
c
            
            
              .
            
            
              beginPath
            
            
              ();
            
            
              
c
            
            
              .
            
            
              moveTo
            
            
              (
            
            
              50
            
            
              ,
            
            
            
            
              50
            
            
              );
            
            
              
c
            
            
              .
            
            
              lineTo
            
            
              (
            
            
              50
            
            
              ,
            
            
            
            
              250
            
            
              );
            
            
              
c
            
            
              .
            
            
              lineTo
            
            
              (
            
            
              250
            
            
              ,
            
            
            
            
              250
            
            
              );
            
            
              
c
            
            
              .
            
            
              closePath
            
            
              ();
            
            
              
c
            
            
              .
            
            
              stroke
            
            
              ();
            
          

結(jié)果:

還有一些其它的改變線(xiàn)條的方式,比如lineCap設(shè)置線(xiàn)條的末端,lineJoin設(shè)置線(xiàn)條的角。

添加評(píng)論 ? 一回 ? 2012-03-23 16:41

刪除圖形

刪除圖形

最后我們來(lái)了解下如何刪除已經(jīng)繪制的圖形,刪除圖形只需Javascript API提供的一個(gè)名為clearRect的方法,其原理是使參數(shù)指定的矩形區(qū)域背景變?yōu)橥该鳌?

本文示例畫(huà)布長(zhǎng)寬分別為500像素,要想刪除整個(gè)畫(huà)布圖形,可以這樣做:

            
              c
            
            
              .
            
            
              fillRect
            
            
              (
            
            
              50
            
            
              ,
            
            
            
            
              50
            
            
              ,
            
            
            
            
              100
            
            
              ,
            
            
            
            
              100
            
            
              );
            
            
              
c
            
            
              .
            
            
              clearRect
            
            
              (
            
            
              0
            
            
              ,
            
            
            
            
              0
            
            
              ,
            
            
            
            
              500
            
            
              ,
            
            
            
            
              500
            
            
              );
            
          

上面的代碼執(zhí)行后,你會(huì)什么都看不到,事實(shí)上填充的矩形已經(jīng)繪制,只是瞬間被刪除了,所以你看不到它。

如果你不清楚畫(huà)布的具體寬高,清除整個(gè)畫(huà)布可以這樣:

            
              c
            
            
              .
            
            
              clearRect
            
            
              (
            
            
              0
            
            
              ,
            
            
            
            
              0
            
            
              ,
            
            
               canvas
            
            
              .
            
            
              width
            
            
              ,
            
            
               canvas
            
            
              .
            
            
              height
            
            
              );
            
          
添加評(píng)論 ? 一回 ? 2012-03-23 16:41

刪除畫(huà)布中的區(qū)域

刪除畫(huà)布中的區(qū)域

如果你不想刪除整個(gè)畫(huà)布的圖形,而僅僅刪除畫(huà)布中的一個(gè)區(qū)域,假如,你繪制了一個(gè)黑色的正方形,旁邊繪制了一個(gè)紅色的正方形:

            
              c
            
            
              .
            
            
              fillRect
            
            
              (
            
            
              50
            
            
              ,
            
            
            
            
              50
            
            
              ,
            
            
            
            
              100
            
            
              ,
            
            
            
            
              100
            
            
              );
            
            
              
c
            
            
              .
            
            
              fillStyle 
            
            
              =
            
            
            
            
              "#f00"
            
            
              ;
            
            
              
c
            
            
              .
            
            
              fillRect
            
            
              (
            
            
              200
            
            
              ,
            
            
            
            
              50
            
            
              ,
            
            
            
            
              100
            
            
              ,
            
            
            
            
              100
            
            
              );
            
          

看起來(lái)是這個(gè)樣子:

接下來(lái)你可以通過(guò)clearRect刪除黑色背景的正方形而只保留紅色正方形:

            
              c
            
            
              .
            
            
              clearRect
            
            
              (
            
            
              50
            
            
              ,
            
            
            
            
              50
            
            
              ,
            
            
            
            
              100
            
            
              ,
            
            
            
            
              100
            
            
              );
            
          

注意傳入clearRect的參數(shù)能確保能覆蓋要被刪除的圖形的區(qū)域。

HTML5 canvas 基礎(chǔ)入門(mén)教程


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系: 360901061

您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】

您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長(zhǎng)會(huì)非常 感謝您的哦?。?!

發(fā)表我的評(píng)論
最新評(píng)論 總共0條評(píng)論
主站蜘蛛池模板: 国产永久精品 | a毛片 | 亚洲国产成人久久午夜 | 一本一本久久a久久综合精品蜜桃 | 九月婷婷综合婷婷 | 亚洲国产婷婷香蕉久久久久久 | 亚洲国产精品免费在线观看 | 国产精品亚洲二区在线 | 日韩精品视频美在线精品视频 | 五月婷婷激情综合网 | 色综合综合色 | 日韩 三级 | 亚洲精品一区二区三区婷婷月 | 日本特交大片免费观看 | 久久精品成人一区二区三区 | 国产午夜精品一区二区 | 久草在线久草在线 | 日本高清中文字幕视频在线 | 亚洲国产精品激情在线观看 | 一级黄色影片 | 中文字幕精品视频 | 91这里只有精品 | 久久频精品99香蕉国产 | 国产福利第一视频 | 国产极品福利视频在线观看 | 婷婷在线免费视频 | 激情奇米网| 日韩影片在线观看 | 久久最新免费视频 | 成人91在线 | 国产精品永久免费视频 | 毛片5| 亚洲成a人片在线v观看 | 天天摸天天碰色综合网 | 欧美久久一区二区三区 | 国产一级二级在线观看 | 色偷偷88888欧美精品久久久 | 欧美视频一区在线 | 亚洲精品无码不卡在线播放he | 国产在线激情 | 奇米777四色影视 |