溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。
畫布的高度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是窗口高度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。
畫布的寬度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是窗口寬度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。
| 方法 | 描述 |
|---|---|
| getContext() | 返回一個用于在畫布上繪圖的環境。 |
規定元素的 id、寬度和高度：
- <canvas id="myCanvas" width="200" height="100"></canvas>
通過 JavaScript 來繪制
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：
- <script type="text/javascript">
- var c=document.getElementById("myCanvas");
- var ccxt=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 坐標用于在畫布上對繪畫進行定位。
包括前幾篇DEMO都涉及了大量的坐標，那這些坐標是如何準備得到的呢，我們實際開發如何得到我們想要的坐標點?下面給出一個獲取canvas坐標點的DEMO：
- <!DOCTYPE HTML>
- <html>
- <head>
- <style type="text/css">
- body
- {
- font-size:70%;
- font-family:verdana,helvetica,arial,sans-serif;
- }
- </style>
- <script type="text/javascript">
- function cnvs_getCoordinates(e)
- {
- x=e.clientX;
- y=e.clientY;
- document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
- }
- function cnvs_clearCoordinates()
- {
- document.getElementById("xycoordinates").innerHTML="";
- }
- </script>
- </head>
- <body style="margin:0px;">
- <p>把鼠標懸停在下面的矩形上可以看到坐標：</p>
- <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
- <br />
- <br />
- <br />
- <div id="xycoordinates"></div>
- </body>
- </html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
