canvas新手常見問題

1. 為什么要設(shè)置display: block书在?
圖片文字等inline元素默認(rèn)是和父級元素的baseline對齊的,而baseline又和父級底邊有一定距離(這個距離和 font-size蕊温,font-family 相關(guān)), canvas也是這樣,為了避免這個問題发笔,一般將canvas設(shè)置為塊級元素了讨。

2. 為什么通過css設(shè)置了canvas的寬高,還要設(shè)置canvas元素的width前计、height屬性垃杖?兩者有何不同?
css設(shè)置canvas的寬高與css設(shè)置其他標(biāo)簽作用相同调俘;
設(shè)置canvas元素的width旺垒、height屬性是設(shè)置canvas橫向肤无、豎向的像素數(shù)

例如:
css設(shè)置canvas寬高分別為200px和50px
設(shè)置canvas元素的width宛渐、height屬性分別為400和50
我們通過rect方法給整個canvas填滿顏色,要用
canvas.getContext('2d').rect(0, 0, 400, 50)
而不是
canvas.getContext('2d').rect(0, 0, 200, 50)
而最終我們在瀏覽器上看到的业岁,是一個200*50的方塊
在線演示

3. 設(shè)置canvas元素的width鳍烁、height屬性必須不能帶單位
可以設(shè)置數(shù)字如:200繁扎,也可以使用字符串如:‘200’
可以用canvas.clientWidth、canvas.clientHeight獲取元素的寬高爹梁,
也可提使用{width, height} = canvas.getBoundingClientRect()
這兩個方法獲取的都是數(shù)字姚垃,不帶單位

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末积糯,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子看成,更是在濱河造成了極大的恐慌川慌,老刑警劉巖祠乃,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異琴拧,居然都是意外死亡艾蓝,警方通過查閱死者的電腦和手機力崇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門亮靴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來于置,“玉大人,你說我怎么就攤上這事搓侄』八伲” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長廓俭。 經(jīng)常有香客問我,道長汹忠,這世上最難降的妖魔是什么雹熬? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任竿报,我火速辦了婚禮,結(jié)果婚禮上隆判,老公的妹妹穿的比我還像新娘僧界。我一直安慰自己捂襟,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布涨共。 她就那樣靜靜地躺著,像睡著了一般懊直。 火紅的嫁衣襯著肌膚如雪室囊。 梳的紋絲不亂的頭發(fā)上魁索,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天,我揣著相機與錄音尝偎,去河邊找鬼鹏控。 笑死,一個胖子當(dāng)著我的面吹牛急前,可吹牛的內(nèi)容都是我干的瀑构。 我是一名探鬼主播刨摩,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼澡刹!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起罢浇,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤陆赋,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后嚷闭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體攒岛,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年胞锰,在試婚紗的時候發(fā)現(xiàn)自己被綠了灾锯。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡嗅榕,死狀恐怖顺饮,靈堂內(nèi)的尸體忽然破棺而出吵聪,到底是詐尸還是另有隱情,我是刑警寧澤兼雄,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布吟逝,位于F島的核電站,受9級特大地震影響赦肋,放射性物質(zhì)發(fā)生泄漏局蚀。R本人自食惡果不足惜琅绅,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一骆捧、第九天 我趴在偏房一處隱蔽的房頂上張望妆绞。 院中可真熱鬧,春花似錦来涨、人聲如沸技羔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽航攒。三九已至,卻和暖如春憔狞,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背簇抵。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工典蜕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留嘉裤,地道東北人厢洞。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓丧叽,卻偏偏與公主長得像,于是被迫代替她去往敵國和親脱茉。 傳聞我的和親對象是個殘疾皇子琴许,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,577評論 2 353

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

  • 一:canvas簡介 1.1什么是canvas? ①:canvas是HTML5提供的一種新標(biāo)簽 ②:HTML5 ...
    GreenHand1閱讀 4,679評論 2 32
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案庆捺? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,748評論 1 92
  • 一你画、canvas簡介 1.1 什么是canvas?(了解) 是HTML5提供的一種新標(biāo)簽 Canvas是一個矩形區(qū)...
    Looog閱讀 3,941評論 3 40
  • 神奇且強大的canvas 一.Canvas的基本介紹 1.什么是Canvas 定義:是HTML5提供的一種新標(biāo)簽,...
    Ainy塵世繁花終凋落閱讀 10,746評論 1 18
  • 我家老大沒上幼兒園凭迹,上小學(xué)前也沒有系統(tǒng)的學(xué)過拼音嗅绸、數(shù)字撕彤、英文蚀狰,也沒參加過任何興趣班撼唾,早教班哥蔚。上小學(xué)前倒谷,都是跟著我在...
    捨不得你去上學(xué)閱讀 1,071評論 0 3