怎么用HTML5的canvas來繪圖

本文小編為大家詳細(xì)介紹“怎么用HTML5的canvas來繪圖”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“怎么用HTML5的canvas來繪圖”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

　　canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。我們?cè)贑anvas區(qū)域中繪制圖形，并不是拿鼠標(biāo)在Canvas中畫畫。事實(shí)上Canvas元素只是一塊無色透明的區(qū)域，就像一個(gè)只有寬度高度沒有背景的DIV一樣，需要使用JavaScript腳本在其中繪畫。

　　示例一：繪制方形

　　我們?cè)陧?yè)面上創(chuàng)建一個(gè)canvas元素，并且制定id及寬和高。

　　your?browser?does?not?support?the?canvas?tag

　　Canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須使用JavaScript來完成：

　　var?c=document.getElementById（"square"）;? var?cxt=c.getContext（"2d"）;

　　cxt.fillStyle="#ff0000";

　　cxt.fillRect（0,0,150,75）;

　　通過document.getElementById（"square"）來獲取canvas元素，然后使用c.getContext（"2d"）來獲取2d繪圖對(duì)象。接著使用fillStyle 方法將其染成紅色，fillRect 方法規(guī)定了形狀、位置和尺寸。上例中繪制了一個(gè)紅色的方形。

　　示例二：繪制線條

　　我們可以通過起始坐標(biāo)，和結(jié)束坐標(biāo)，來繪制一條直線。

　　var?line=document.getElementById（'line'）;? var?c=line.getContext（'2d'）;

　　c.moveTo（20,20）;

　　c.lineTo（200,100）;

　　c.lineTo（20,100）;

　　c.stroke（）;

　　moveTo（x，y）：設(shè)置繪圖起始坐標(biāo)。

　　lineTo（x, y）：從上一個(gè)起點(diǎn)到（x,y）的點(diǎn)畫線，上一個(gè)起點(diǎn)可以通過moveTo來指定，默認(rèn)為原先路徑的終點(diǎn)。

　　stroke（）：描邊路徑。

　　示例三：繪制圓形

　　我們可以通過規(guī)定尺寸、顏色和位置，來繪制一個(gè)圓。

　　var?c=document.getElementById（'circle'）;? var?r=c.getContext（'2d'）;

　　r.fillStyle='#ff0000';

　　r.beginPath（）;

　　r.arc（70,80,45,0,Math.PI*2,true）;

　　r.closePath（）;

　　r.fill（）;

　　beginPath（）：創(chuàng)建路徑的第一步是調(diào)用beginPath方法，返回一個(gè)存儲(chǔ)路徑的信息。

　　closePath（）：從當(dāng)前的點(diǎn)到起始點(diǎn)閉合路徑。

　　arc（x, y, radius, startAngle, endAngle, anticlockwise）： （x,y）是圓弧的圓心，radius-半徑， startAngle和endAngle是圓弧的開始和結(jié)束弧度（radians = （Math.PI/180）*degree），anticlockwise為true的話是逆時(shí)針，否則為順時(shí)針。

　　fillStyle：設(shè)置填充色。

　　fill（）：填充路徑。

　　示例四：制作動(dòng)畫

　　我們可以通過javascript動(dòng)態(tài)地在畫布上繪制圖像，并產(chǎn)生動(dòng)畫效果。

　　var?x=0;? var?y=0;? var?ctx?=?document.getElementById（"animate"）。getContext（"2d"）;

　　setInterval（function（）{

　　ctx.clearRect（0,0,600,600）;

　　ctx.fillStyle="#fc0";

　　ctx.beginPath（）;

　　ctx.arc（x++,y++,15,0,Math.PI*2,true）;

　　ctx.closePath（）;

　　ctx.fill（）;? },10）;

　　上述代碼中，我們使用setInterval（）來定時(shí)運(yùn)行（每隔10毫秒運(yùn)行一次），畫布中，繪制一個(gè)黃色的圓形，并且在繪制前先要clearRect（） 清除上次繪制的圓形，這樣看起來就是一個(gè)從畫布左上角到右下角運(yùn)動(dòng)的小球的簡(jiǎn)單動(dòng)畫。

　　Canvas還能加載圖像，繪制顏色漸變的圖案，產(chǎn)生陰影效果等，本站helloweba將會(huì)有更多canvas效果方面的講解。Canvas是一個(gè)很輕便的標(biāo)簽，但是，使用它能完成的非常炫麗效果，這絕對(duì)讓你震驚。只要有JavaScript腳本的支持，Canvas能完成你幾乎能想到的所有效果。

讀到這里，這篇“怎么用HTML5的canvas來繪圖”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。