怎么用HTML5的canvas來繪圖

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

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

　　示例一：繪制方形

　　我們在頁面上創建一個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繪圖對象。接著使用fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。上例中繪制了一個紅色的方形。

　　示例二：繪制線條

　　我們可以通過起始坐標，和結束坐標，來繪制一條直線。

　　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）：設置繪圖起始坐標。

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

　　stroke（）：描邊路徑。

　　示例三：繪制圓形

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

　　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（）：創建路徑的第一步是調用beginPath方法，返回一個存儲路徑的信息。

　　closePath（）：從當前的點到起始點閉合路徑。

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

　　fillStyle：設置填充色。

　　fill（）：填充路徑。

　　示例四：制作動畫

　　我們可以通過javascript動態地在畫布上繪制圖像，并產生動畫效果。

　　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（）來定時運行（每隔10毫秒運行一次），畫布中，繪制一個黃色的圓形，并且在繪制前先要clearRect（） 清除上次繪制的圓形，這樣看起來就是一個從畫布左上角到右下角運動的小球的簡單動畫。

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

讀到這里，這篇“怎么用HTML5的canvas來繪圖”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。