canvas繪圖詳解(一)

一、canvas繪圖環(huán)境

<canvas id="canvas" width="800" height="800">該瀏覽器不支持canvas元素</canvas>
在<body></body>中添加這段代碼相當(dāng)于創(chuàng)建了一塊畫布短条,要使用<canvas>元素恭朗,必須為其設(shè)置畫布大小,寫在<canvas></canvas>標(biāo)簽內(nèi)的內(nèi)容將在使用的瀏覽器不支持<canvas>時顯示哥攘。想要繪圖剖煌,還必須獲得繪圖上下文,

var canvas=document.getElementById('canvas');
var context=canvas.getContext("2d");

二逝淹、路徑繪制

  • moveTo(x,y) 將繪制坐標(biāo)移到(x,y),但不進(jìn)行畫線耕姊。
    lineTo(x,y)從上一點開始,繪制直線到(x,y)栅葡。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>畫線</title>
    <style type="text/css">
        #canvas
        {
            display: block;
            border:1px solid #ccc;
            margin:20px auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
    window.onload=function(){
        var canvas=document.getElementById('canvas');
        canvas.width="600";
        canvas.height="600"
        var context=canvas.getContext("2d");
        
        context.moveTo(100,100);
        context.lineTo(500,500);
        context.lineTo(100,500);
        context.lineWidth=5;     //設(shè)置畫線寬度
        context.strokeStyle="#058";  //設(shè)置畫線的顏色
        context.stroke();  //正式進(jìn)行畫線
    }
        
    </script>
</body>
</html>

效果如圖所示:


image.png

如果想連接圖形的首尾茉兰,繪制一個封閉的圖形,有兩種做法

  1. 再使用context.lineTo(start欣簇,end);連接圖形的首尾坐標(biāo)规脸。
  2. 使用beginPath()和closePath()也將實現(xiàn)同樣的效果。對于實現(xiàn)封閉圖形很有用熊咽。
       context.beginPath();
       context.moveTo(100,100);
       context.lineTo(500,500);
       context.lineTo(100,500);
       context.closePath();
  • arc(x,y,radius,startAngle,endAngle,direction)以(x,y)為圓心莫鸭,畫一條弧線。direction為true為逆時針方向繪制横殴,為false表示為順時針繪制被因,如果不進(jìn)行設(shè)定,默認(rèn)為true衫仑。無論順時針還是逆時針梨与,正右方都為0弧度,正下方為 PI/2,正左方為PI.正上方為PI/2*3;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>畫線</title>
    <style type="text/css">
        #canvas
        {
            display: block;
            border:1px solid #ccc;
            margin:20px auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
    window.onload=function(){
        var canvas=document.getElementById('canvas');
        canvas.width="600";
        canvas.height="600"
        var context=canvas.getContext("2d");
        context.arc(200,200,50,0,Math.PI,false)
        context.lineWidth=5;
        context.strokeStyle="#058";
        context.stroke();
    }
    </script>
</body>
</html>

效果如圖所示:


image.png
  • rect(x,y,width,height):從點x,y繪制一個矩形
    使用方法和上面的類似文狱,不過多介紹粥鞋。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市瞄崇,隨后出現(xiàn)的幾起案子陷虎,更是在濱河造成了極大的恐慌到踏,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件尚猿,死亡現(xiàn)場離奇詭異,居然都是意外死亡铁坎,警方通過查閱死者的電腦和手機(jī)仪缸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進(jìn)店門灯荧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人庄萎,你說我怎么就攤上這事√涟玻” “怎么了糠涛?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長兼犯。 經(jīng)常有香客問我忍捡,道長,這世上最難降的妖魔是什么切黔? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任砸脊,我火速辦了婚禮,結(jié)果婚禮上纬霞,老公的妹妹穿的比我還像新娘凌埂。我一直安慰自己,他們只是感情好诗芜,可當(dāng)我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布瞳抓。 她就那樣靜靜地躺著,像睡著了一般伏恐。 火紅的嫁衣襯著肌膚如雪孩哑。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天脐湾,我揣著相機(jī)與錄音臭笆,去河邊找鬼。 笑死秤掌,一個胖子當(dāng)著我的面吹牛愁铺,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播闻鉴,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼茵乱,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了孟岛?” 一聲冷哼從身側(cè)響起瓶竭,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤督勺,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后斤贰,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體智哀,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年荧恍,在試婚紗的時候發(fā)現(xiàn)自己被綠了瓷叫。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡送巡,死狀恐怖摹菠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情骗爆,我是刑警寧澤次氨,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站摘投,受9級特大地震影響煮寡,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜谷朝,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一洲押、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧圆凰,春花似錦杈帐、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至跃须,卻和暖如春站叼,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背菇民。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工尽楔, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人第练。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓阔馋,卻偏偏與公主長得像,于是被迫代替她去往敵國和親娇掏。 傳聞我的和親對象是個殘疾皇子呕寝,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,922評論 2 361

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

  • 一:canvas簡介 1.1什么是canvas? ①:canvas是HTML5提供的一種新標(biāo)簽 ②:HTML5 ...
    GreenHand1閱讀 4,693評論 2 32
  • 一婴梧、基礎(chǔ)介紹和畫直線 大多數(shù)現(xiàn)代瀏覽器都是支持Canvas的,比如 Firefox, safari, chrome...
    空谷悠閱讀 849評論 0 1
  • 一下梢、canvas簡介 1.1 什么是canvas客蹋?(了解) 是HTML5提供的一種新標(biāo)簽 Canvas是一個矩形區(qū)...
    Looog閱讀 3,942評論 3 40
  • 熟悉html5的程序員們肯定都知道 元素,該元素是用來在頁面中規(guī)定一塊區(qū)域孽江,然后由js在該區(qū)域內(nèi)繪制圖形讶坯。canv...
    米幾V閱讀 2,167評論 1 5
  • 0x001 Canvas是啥? 說白了Canvas就是一塊畫布岗屏,可以使用js當(dāng)畫筆在上面繪畫的畫布闽巩,可以顯示在網(wǎng)頁...
    賣梳子的鯉魚閱讀 1,861評論 1 21