怎么使用H5的canvas元素

本篇內容主要講解“怎么使用H5的canvas元素”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么使用H5的canvas元素”吧!

　　canvas元素是HTML5中新添加的一個元素，該元素是HTML5中的一個亮點。Canvas元素就像一塊畫布，通過該元素自帶的API結合JavaScript代碼可以繪制各種圖形和圖像以及動畫效果。

　　Canvas元素瀏覽器不兼容問題

　　ie9以上才支持canvas,其他chrome、firefox、蘋果瀏覽器等都支持

　　只要瀏覽器兼容canvas，那么就會支持絕大部分api(個別最新api除外)

　　移動端的兼容情況非常理想，基本上隨便使用

　　2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持

　　如果瀏覽器不兼容，最好進行友好提示，提示內容只有在瀏覽器不支持時才顯示。

　　//例如：

　　<canvasid="cavsElem">

　　你的瀏覽器不支持canvas，請升級瀏覽器

　　</canvas>

　　瀏覽器不兼容，也可以使用flash等手段進行優雅降級

　　使用Canvas元素創建畫布

　　在頁面中創建canvas元素與創建其他元素一樣，只需要添加一個

　　注意：

　　不能使用CSS樣式控制canvas元素的寬高，否則會導致繪制的圖形拉伸。

　　重新設置canvas標簽的寬高屬性會導致畫布擦除所有的內容。

　　可以給canvas畫布設置背景色

　　1.3canvas坐標系

　　在開始繪制任何圖像之前，我們先講一下canvas的坐標系。canvas坐標系是以左上角0,0處為坐標原點，水平方向為x軸，向右為正；垂直方向為y軸，向下為正。

　　繪制線徑

　　獲取上下文對象(CanvasRenderingContext2D)

　　首先，獲取canvas元素，然后調用元素的getContext(“2d”)方法，該方法返回一個CanvasRenderingContext2D對象，使用該對象就可以在畫布上繪圖了。

　　varmcanvas=document.getElementById("mcanvas");

　　varmcontext=mcanvas.getContext("2d");

　　設置繪制起點(moveTo)

　　//語法：

　　ctx.moveTo(x,y);

　　*解釋：設置上下文繪制路徑的起點。相當于移動畫筆到某個位置。

　　*參數：x,y都是相對于canvas坐標系的原點（左上角）。

　　*注意：繪制線段前必須先設置起點，不然繪制無效。如果不進行設置，就會使用lineTo的坐標當作moveTo

到此，相信大家對“怎么使用H5的canvas元素”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！