」;最後透過css屬性設定圖形樣式即可。"/> 」;最後透過css屬性設定圖形樣式即可。">

首頁  >  文章  >  web前端  >  如何透過Canvas標籤繪製圖形

如何透過Canvas標籤繪製圖形

藏色散人
藏色散人原創
2018-11-30 10:37:003731瀏覽

透過Canvas標籤繪製圖形的方法:先建立一個HTML範例檔案;然後在body中輸入「」;最後透過css屬性設定圖形樣式即可。

如何透過Canvas標籤繪製圖形

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

Canvas標籤是HTML5中的新元素,這個標籤是用來圖形繪製的。而HTML5也就是萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言(HTML)的第五次重大修改。

那麼對於學習HTML的新手來說,可能對於這個標籤元素不太清楚。

下面我們可以透過簡單的範例,來介紹Canvas標籤的使用詳解。

canvas繪製簡單畫布圖形(矩形)範例程式碼如下:

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>Canvas简单使用示例</title>
    <style type="text/css">
        #FirstCanvas{
            width: 450px;
            height: 300px;
            border: 3px solid #3262ff;
            background-color: #acffcb;
        }
    </style>
</head>
<body>
<canvas id="FirstCanvas"></canvas>
</body>
</html>

推薦參考學習:《HTML5教學

#圖形效果如下:

如何透過Canvas標籤繪製圖形

標籤只是圖形容器,我們必須使用腳本來繪製圖形。也就是說,這個標籤通常必須指定一個id屬性,以便我們在腳本中使用。 (這個腳本通常指的是JavaScript腳本)

這裡要注意的是,在預設情況下 元素是沒有邊框和內容的,所以我們需要使用style 屬性來新增邊框width寬度和height 高度,然後來定義的畫布的大小.

本篇就是透過canvas標籤繪製簡單的畫布圖形,非常簡單易懂,希望對需要的朋友有所幫助!

以上是如何透過Canvas標籤繪製圖形的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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