HTML5 Canvas 畫布 - chengxs－IT工程師數位筆記本

文章出處

一、Canvas是什么？

canvas，是一個畫布，canvas元素用于在網頁上繪制圖形。

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

二、創建Canvas元素

加上基本的屬性：類，寬度和高度

<canvas class="MyCanvas" width:100px height:100px></canvas>

三、繪制路徑

使用的是javascript元素來繪制，canvas本省不具備繪圖的能力。所有的繪制必須通過javascript來完成。

1、JavaScript 使用 id 來尋找 canvas 元素：

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

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

2、繪制一個紅色的矩形：

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

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

四、坐標

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

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

如下圖所示，畫布的 X 和 Y 坐標用于在畫布上對繪畫進行定位。

1、谷歌瀏覽器（chrome）

2、IE9瀏覽器下

3、IE8瀏覽器在（毫無壓力）

五、代碼部分

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #box {
                float: left;
                width: 199px;
                height: 99px;
                border: 1px solid #c3c3c3;
            }
        </style>
        <script type="text/javascript">
            function xy_get(e) {
                x = e.clientX;
                y = e.clientY;
                document.getElementById("xy_zuobiao").innerHTML = "Coordinates: (" + x + "," + y + ")";
            }

            function xy_clear() {
                document.getElementById("xy_zuobiao").innerHTML = "";
            }
        </script>
    </head>

    <body >
        <p>鼠標坐標：</p>
        <div id="box" onmousemove="xy_get(event)" onmouseout="xy_clear()"></div>
        <div id="xy_zuobiao"></div>
    </body>

</html>