【HTML5】學(xué)習(xí)記錄---Canvas (day1)

1.什么是Canvas?

  • canvas 是 HTML5 提供的一個用于展示繪圖效果的標(biāo)簽
  • HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。
  • 畫布是一個矩形區(qū)域茬故,可以控制其每一像素。
  • canvas 擁有多種繪制路徑校焦、矩形俏脊、圓形、字符以及添加圖像的方法吊履。

2.創(chuàng)建Canvas標(biāo)簽

<canvas id="myCanvas" width="600" height="400"></canvas>

  • 此標(biāo)簽只能展示繪圖內(nèi)容安皱,不能進(jìn)行繪圖。
  • canvas的兼容性艇炎, IE9及其以上版本的瀏覽器酌伊,才支持canvas標(biāo)簽 。

3.通過JavaScript來繪制

  • canvas 元素本身是沒有繪圖能力的缀踪。所有的繪制工作必須在 JavaScript 內(nèi)部完成
3.1 畫一個簡單的紅色矩形
<script type="text/javascript">
  var c=document.getElementById("myCanvas");   //使用id來尋找canvas元素
  var cxt=c.getContext("2d");   //創(chuàng)建Context對象

  /*下面兩行繪制紅色矩形*/
  cxt.fillStyle="#FF0000";
  cxt.fillRect=(0,0,150,75);
</script>
效果如圖
  • getContext() 方法可返回一個對象居砖,該對象提供了用于在畫布上繪圖的方法和屬性。
  • fillStyle() 設(shè)置或返回用于填充繪畫的顏色驴娃、漸變或模式悯蝉,將其染成紅色。
  • fillRect() 方法繪制“被填充”的矩形托慨,規(guī)定了形狀鼻由、位置和尺寸。

4.一些Canvas的方法和屬性

5.瀏覽器支持

  • Internet Explorer 9厚棵、Firefox蕉世、Opera、Chrome 以及 Safari 支持 <canvas> 及其屬性和方法婆硬。

  • Internet Explorer 8 以及更早的版本不支持 <canvas> 元素狠轻。

簡單的總結(jié):
在朋友的推薦下今天是第一次在這里寫這種文章,這大概只能算是一篇小小的學(xué)習(xí)記錄彬犯,并沒有什么技術(shù)含量向楼,我的文筆很差,寫不出來很華麗的東西谐区,但是偶爾寫寫湖蜕,大概也對自己知識積累寫作提升有很大幫助吧。
通過對canvas的學(xué)習(xí)宋列,知道了它好像是個不得了的東西昭抒,今天只是初步的了解了它的一些基礎(chǔ)知識,不懂的東西還很多,接下來也會繼續(xù)學(xué)習(xí)提升自己灭返。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末盗迟,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子熙含,更是在濱河造成了極大的恐慌罚缕,老刑警劉巖,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件怎静,死亡現(xiàn)場離奇詭異怕磨,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)消约,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進(jìn)店門肠鲫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人或粮,你說我怎么就攤上這事导饲。” “怎么了氯材?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵渣锦,是天一觀的道長。 經(jīng)常有香客問我氢哮,道長袋毙,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任冗尤,我火速辦了婚禮听盖,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘裂七。我一直安慰自己皆看,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布背零。 她就那樣靜靜地躺著腰吟,像睡著了一般。 火紅的嫁衣襯著肌膚如雪徙瓶。 梳的紋絲不亂的頭發(fā)上毛雇,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天,我揣著相機(jī)與錄音侦镇,去河邊找鬼灵疮。 笑死,一個胖子當(dāng)著我的面吹牛虽缕,可吹牛的內(nèi)容都是我干的始藕。 我是一名探鬼主播,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼氮趋,長吁一口氣:“原來是場噩夢啊……” “哼伍派!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起剩胁,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤诉植,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后昵观,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體晾腔,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年啊犬,在試婚紗的時候發(fā)現(xiàn)自己被綠了灼擂。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡觉至,死狀恐怖剔应,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情语御,我是刑警寧澤峻贮,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站应闯,受9級特大地震影響纤控,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜碉纺,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一船万、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧骨田,春花似錦唬涧、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至抵卫,卻和暖如春狮荔,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背殖氏。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留姻采,地道東北人。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像宝鼓,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子巴刻,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,440評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 一:canvas簡介 1.1什么是canvas愚铡? ①:canvas是HTML5提供的一種新標(biāo)簽 ②:HTML5 ...
    GreenHand1閱讀 4,674評論 2 32
  • 一、canvas簡介 1.1 什么是canvas胡陪?(了解) 是HTML5提供的一種新標(biāo)簽 Canvas是一個矩形區(qū)...
    Looog閱讀 3,939評論 3 40
  • 接上 關(guān)于HTML/HTML5(一)http://www.reibang.com/p/33fc7840c079 學(xué)...
    Amyyy_閱讀 784評論 0 4
  • 書中代碼示例效果展示:Core HTML5 Canvas Examples 基礎(chǔ)知識 canvas元素 canva...
    szu_bee閱讀 2,810評論 2 28
  • 一柠座、簡介 HTML5 中的定義:“它是依賴分辨率的位圖畫布邑雅,你可以在 canvas 上面繪制任何圖形,甚至加載照片...
    destiny0904閱讀 10,521評論 1 4