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

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)論
主站蜘蛛池模板: 国产69精品久久久久9999 | 狼狼色丁香久久婷婷综合五月 | 午夜久久久 | 奇米影视奇米色 | 成人免费xxx色视频 成人免费播放视频777777 | 国产精品伦理久久久久久 | 久久厕所精品国产精品亚洲 | 老妇女性较大毛片 | 久久精品视频热 | 2022国内精品免费福利视频 | 精品福利在线视频 | 午夜色网站 | 久久成人国产精品二三区 | 久久是免费只精品热在线 | 久久在线免费视频 | 日本欧美在线视频 | 性欧美video另类hd亚洲人 | 青草国产精品久久久久久 | 桃花综合| 在线观看日本免费不卡 | 正在播放久久 | 99久久精品国产一区二区成人 | 亚洲阿v天堂在线观看2017 | 天天操国产 | 日本一区二区在线 | 四虎最新永久免费网址 | 涩涩97在线观看视频 | 看个毛片 | 91亚色视频在线观看 | 波多野结衣久久精品 | 国产欧洲亚洲 | 欧美亚洲免费 | 免费一级片 | 成年女人免费看片 | 天天爱夜夜爽 | 久久久窝窝午夜精品 | 99在线视频精品费观看视 | 最新日本一级中文字幕 | 五月天丁香婷婷综合 | 欧美e片成 人 在线播放乱妇 | 国产香蕉在线观看 |