fillRect方法怎麼使用

不言原創: 2019-02-11 17:21:0912902瀏覽

fillRect方法用於在畫布上繪製已填入的矩形，語法為「context.fillRect(x,y,width,height);」；其中，參數「x」和「y」表示矩形左上角的x與y座標，，「width」和「height」表示矩形的寬度與高度。

fillRect方法怎麼使用

本文操作環境：Windows7系統、Dell G3電腦、HTML5&&CSS3版。

fillRect是HTML5中的方法，可以用來在畫布上繪製已填滿的矩形，預設的填滿顏色是黑色，我們就來看看fillRect方法的具體使用。

我們先來看看fillRect的基本語法

context.fillRect(x,y,width,height);

x表示矩形左上角的 x 座標。

y表示矩形左上角的 y 座標。

width表示矩形的寬度。

height表示矩形的高度。

（參考：HTML5 canvas）

下面我們來看具體的範例

程式碼如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    <canvas id="rectangle" width="200" height="200"></canvas>
    <script>
    // 使用JS获取canvas元素
        var canvas=document.getElementById(&#39;rectangle&#39;);
        // 获取canvas
        var c=canvas.getContext(&#39;2d&#39;);
        // 在画布上绘制一个矩形
        c.fillRect(50,50,100,100);
    </script>
</body>
</html>

效果如下：繪製了一個填滿黑色的長方形

fillRect方法怎麼使用

這篇文章到這裡就全部結束了，更多有關前端的精彩內容大家可以關注PHP中文網的其他相關欄位教學！！！

以上是fillRect方法怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：html5能做什麼下一篇：html5能做什麼

看更多