初探HTML5——canvas元素(二)

本節(jié)主要涉及繪制矩形的操作燕垃,內(nèi)容比較簡(jiǎn)單俏橘。

一允华、繪制實(shí)心矩形

調(diào)用fillRect(x,y,w,h) 方法可以繪制一個(gè)實(shí)心矩形,參數(shù)分別表示x寥掐,y軸坐標(biāo)和矩形的寬靴寂、高。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>canvas演示繪制矩形</title>
    <script type="text/javascript">
      window.onload=function(){
       //獲取canvas對(duì)象的context(繪圖上下文)
       var context=document.getElementById('canvas').getContext("2d");
       //繪制實(shí)心矩形
       context.fillRect(50,50,200,100);
      }
    </script>
  </head>
  <body>
     <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>

在瀏覽器中查看效果:

實(shí)心矩形效果

二召耘、美化矩形

如圖黑乎乎的實(shí)心矩形真是不怎么美觀百炬,接下來(lái)我們嘗試美化一下。先讓矩形換個(gè)顏色污它,然后添加一個(gè)外邊框剖踊。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>canvas演示繪制矩形</title>
    <script type="text/javascript">
      window.onload=function(){
       //獲取canvas對(duì)象的context(繪圖上下文)
       var context=document.getElementById('canvas').getContext("2d");
       //設(shè)置填充色
       context.fillStyle="bisque";
       //設(shè)置邊框?qū)挾?       context.lineWidth=2;
       //設(shè)置邊框顏色
       context.strokeStyle="red";
       //繪制實(shí)心矩形
       context.fillRect(100,100,300,100);
       //繪制矩形邊框(空心矩形)
       context.strokeRect(100,100,300,100);
      }
    </script>
  </head>
  <body>
     <canvas id="canvas" width="400" height="400"></canvas>
  </body>
</html>

瀏覽效果:

美化之后的效果

PS:恭喜你庶弃,又Get了新技能!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末德澈,一起剝皮案震驚了整個(gè)濱河市歇攻,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌梆造,老刑警劉巖缴守,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異镇辉,居然都是意外死亡屡穗,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門忽肛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)村砂,“玉大人,你說(shuō)我怎么就攤上這事麻裁」烤担” “怎么了源祈?”我有些...
    開封第一講書人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵煎源,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我香缺,道長(zhǎng)手销,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任图张,我火速辦了婚禮锋拖,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘祸轮。我一直安慰自己兽埃,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開白布适袜。 她就那樣靜靜地躺著柄错,像睡著了一般。 火紅的嫁衣襯著肌膚如雪苦酱。 梳的紋絲不亂的頭發(fā)上售貌,一...
    開封第一講書人閱讀 52,821評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音疫萤,去河邊找鬼颂跨。 笑死,一個(gè)胖子當(dāng)著我的面吹牛扯饶,可吹牛的內(nèi)容都是我干的恒削。 我是一名探鬼主播池颈,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼蔓同!你這毒婦竟也來(lái)了饶辙?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤斑粱,失蹤者是張志新(化名)和其女友劉穎弃揽,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體则北,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡矿微,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了尚揣。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片涌矢。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖快骗,靈堂內(nèi)的尸體忽然破棺而出娜庇,到底是詐尸還是另有隱情,我是刑警寧澤方篮,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布名秀,位于F島的核電站,受9級(jí)特大地震影響藕溅,放射性物質(zhì)發(fā)生泄漏匕得。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一巾表、第九天 我趴在偏房一處隱蔽的房頂上張望汁掠。 院中可真熱鬧,春花似錦集币、人聲如沸考阱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)乞榨。三九已至,卻和暖如春偶妖,著一層夾襖步出監(jiān)牢的瞬間姜凄,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工趾访, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留态秧,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓扼鞋,卻偏偏與公主長(zhǎng)得像申鱼,于是被迫代替她去往敵國(guó)和親愤诱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

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

  • 一:canvas簡(jiǎn)介 1.1什么是canvas捐友? ①:canvas是HTML5提供的一種新標(biāo)簽 ②:HTML5 ...
    GreenHand1閱讀 4,693評(píng)論 2 32
  • 一匣砖、什么是 Canvas科吭? HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁(yè)上繪制圖像 畫布是...
    EndEvent閱讀 700評(píng)論 0 1
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接 關(guān)注公眾號(hào)獲取更多資訊 這篇文章主要總結(jié)H5的一些新增的功能以及一些基礎(chǔ)歸納,這里只是一個(gè)提...
    程序員poetry閱讀 9,074評(píng)論 22 225
  • 我是一陣輕風(fēng) 可別小看我猴鲫,吹呀吹 我能吹起金色的麥浪 我能輕拂少女額前的柔絲 我是一滴沾在屋檐的雨水 可別小看我对人,...
    氫氣球在飄閱讀 273評(píng)論 4 3
  • 1. 知識(shí)就是前人的思考給到我們的規(guī)律不需要我們?cè)偃L試驗(yàn)證這些理論,就好比1+1等于2拂共,已經(jīng)得到的概念牺弄,不需...
    yoga麗閱讀 306評(píng)論 0 0