怎樣用canvas在網頁上繪製圖形

canvas 元素用於在網頁上繪製圖形。

什麼是 Canvas?

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。

畫布是一個矩形區域,您可以控制其每一像素。

canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

創建 Canvas 元素

向 HTML5 頁面添加 canvas 元素。

規定元素的 id、寬度和高度:

<canvas id="myCanvas" width="200" height="100"></canvas>

通過 JavaScript 來繪製

canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript 使用 id 來尋找 canvas 元素:

var c=document.getElementById("myCanvas");

然後,創建 context 對象:

var cxt=c.getContext("2d");

getContext("2d") 對象是內建的 HTML5 對象,擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

下面的兩行代碼繪製一個紅色的矩形:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle 方法將其染成紅色,fillRect 方法規定了形狀、位置和尺寸。

理解坐標

上面的 fillRect 方法擁有參數 (0,0,150,75)。

意思是:在畫布上繪製 150x75 的矩形,從左上角開始 (0,0)。

畫布的 X 和 Y 坐標用於在畫布上對繪畫進行定位。

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="http://www.15hhy.com"
cxt.drawImage(img,0,0);

</script>

相關文章

  1. html5教程:[7]canvas 元素在網頁上繪製圖形

    canvas 元素本身是沒有繪圖能力的.所有的繪製工作必須在 JavaScript 內部完成 方法/步驟 一個返回滑鼠坐標的代碼: <!DOCTYPE HTML> <html> ...
  2. 如何在網頁上繪製等比例放大的圖形

    在網頁上面繪製圖形只要調動相關的圖像繪製代碼就行了,而在同一個網頁上面繪製等比例變形的圖形,我們就需要用到scale() 這樣的外形變換代碼了.有了這個代碼,我們就可以讓等比例變形的圖形在繪製方面極為 ...
  3. 用CSS代碼在網頁上繪製漂亮的三角標記

    我們用CSS代碼可以在網頁上面繪製各種的圖標標誌,漂亮的三角形標誌通過一系列的樣式聲明就可以呈現出來,這樣的特色標誌可以用在很多的地方. 工具/原料 dreamweaver 方法/步驟 案例分析:我們 ...
  4. 如何使用HTML5和webgl在網頁上繪製一個點

    HTML5作為最新的HTML標準,擴展了傳統HTML的特性,如二維圖形.網絡傳輸.本地數據存儲等.HTML5時代的到來使瀏覽器正在迅速地從簡單的展示工具轉變為更複雜的應用平台,人們希望網頁不僅僅由二維 ...
  5. 如何在網頁上繪製三個疊加的橢圓

    我們要在網頁上實現一個矢量圖形的效果就要用到SVG代碼,這是一個專門繪製各種矢量圖形的HTML5代碼,對於三個不同顏色的橢圓,我們可以通過相對應的坐標來實現這樣的效果. 工具/原料 dreamweav ...
  6. 網頁上繪製切線弧的技巧

    學習了很多的繪圖代碼之後,我們在繪製單一圖形方面就往往非常簡單了,但是一些組合圖形與複雜圖形的繪製還是有一定難度的,這種難度體現在坐標的精確定位上面. 工具/原料 dreamweaver 方法/步驟 ...
  7. Ae中如何在形狀圖層上繪製圖形

    我們在使用AE的時候如何在形狀圖層上繪製圖層呢? 方法/步驟 打開AE,創建工作項目,在項目窗口單擊右鍵,點擊新建合成. 創建合成後我們可以操縱時間軸,在時間軸上單擊右鍵,點擊新建,形狀圖形. 創建形 ...
  8. 如何在網頁上繪製電路圖

    對於學習電的同學來說,繪製電路圖是一個基本的技能.在學校老師布置的的課設,在社會領導的要求等都會需要你去快速的著手操作,在最短的時間內,找到相應的工具,繪製出所需要的電路圖. 前幾天,因為厭煩軟體安裝 ...
  9. 如何使用python的pillow模塊在圖像上繪製圖形

    python是個很有趣的語言,可以在cmd命令窗口運行,還有很多的功能強大的模塊.這篇經驗告訴你如何使用python的Pillow模塊,在圖像上繪製圖形. 工具/原料 windows系統電腦 pyth ...
  10. 在網頁上用代碼繪製一個漸變邊框的圖形技巧

    用代碼繪製一些有著固定邊框的圖形在網頁上還是比較簡單的,這裡我們就來學學,如何讓這些圖形的邊框產生一種漸變的效果,從而讓圖形更具觀賞性. 工具/原料 dreamweaver 方法/步驟 思路.繪製一個 ...
  11. 如何在matlab同一個圖形上繪製不同坐標系的圖形

    有時候我們為了比較數據的方便,會在同一張圖形上顯示多個曲線,而且曲線的坐標有所不同,這裡我們介紹下方法. 工具/原料 matlab2015a 方法/步驟 雙擊打開matlab程序,新建m文件,輸入以下 ...
  12. 用代碼繪製三次貝塞爾曲線在網頁上的技巧

    對於一些複雜的網頁圖形來說,我們可以通過三次貝塞爾曲線來實現.這個三次貝塞爾曲線的繪製也是有著一定的技巧的.我們的多個不同的控制點就可以把這個三次貝塞爾曲線很精確的繪製出來. 工具/原料 dreamw ...
  13. 通過代碼在網頁上面繪製簡單圖形的技巧

    我們知道,你要在網頁上呈現一些簡單的圖形並不是每次都要在電腦端繪製的,我們可以通過代碼就可以在網頁上自動的繪製出來,這在HTML5裡面是很容易就實現的功能. 工具/原料 dreamweaver 方法/ ...
  14. 在網頁上用代碼繪製有陰影的多邊形

    單調的圖形讓人很容易產生厭惡的心理,而生動的圖形是促使訪問者可以有更大的耐心在網頁上面進行瀏覽,這裡我們就來說說用代碼繪製有陰影的多邊形的效果,掌握了這些技巧以後,你對於網頁元素的處理能力會更加的卓越 ...
  15. MATLAB怎麼用不同顏色在一個圖形上繪製多條曲線

    當我們在使用MATLAB進行繪圖時,相信很多小夥伴需要使用不同顏色和標註不同名稱在同一個圖形上繪製多條曲線,下面分享給大家使用MATLAB用不同顏色名稱在一張圖上繪製多條曲線的方法.步驟,希望能夠幫助 ...
  16. Maya2017如何在曲面上繪製正方形(或其他圖形)

    這裡用的方法是擠出面,有其他方法的朋友也可以分享分享哦~ 工具/原料 maya 方法/步驟 打開圖形,滑鼠右鍵不鬆手選擇"面" 選擇需要繪製形狀的面,按住shift加滑鼠右鍵,選擇 ...
  17. 運用css3製作和調整網頁上圖形的漸變效果。

    運用css3可以製作漸變而不需要依賴圖片來實現,這樣就使得網頁加載的速度更快. 工具/原料 Dreamweaver cc 2014 css3 html 方法/步驟 [第一步]打開Dreamweaver ...
  18. 怎樣下載網頁上(包括國外)的視頻(精華)

    我們遇到網頁上的視頻,很喜歡,要怎麼下載保存下來呢,我們要想把A網站的視頻上床到B網站,為了某種目的,我們要如何下載呢,我現在給大家兩個最簡單的方法(不要忘記呦,星雲小穎的經驗都是最簡單的,傻瓜都看得 ...
  19. 怎樣刪除網頁上的歷史記錄?

    在使用YY瀏覽器的過程中,我們搜尋過的網頁都會記錄在瀏覽器中,我們有可能因為一些原因,想要刪除網頁的歷史記錄,那麼怎樣刪除網頁上的歷史記錄呢?下面我就詳細的說一下: 工具/原料 瀏覽器 方法/步驟 首 ...
  20. 網頁上保存的密碼(瀏覽痕跡)如何刪除

    為使用方便,我們常常在自己的電腦瀏覽器上保存密碼,如:QQ郵箱.12306.天貓.淘寶等等網站,更有涉及到工作方面的.隱私性較大的一些網站.有時會存在將電腦借用他人的情況,為了防止私密信息外露,最好將 ...