H5的CanvasAPI怎麼繪製圖形-H5教程-PHP中文網

首頁

web前端

H5教程

H5的CanvasAPI怎麼繪製圖形

php中世界最好的语言

Jan 09, 2018 am 09:51 AM

apicanvasapihtml5

這次帶給大家H5的CanvasAPI怎麼繪製圖形，怎麼用Canvas製作圖形？ Canvas製作圖形的注意事項有哪些，以下就是實戰案例，一起來看一下。

Canvas元素
以下html程式碼定義了一個canvas元素。

<!DOCTYPE html>  
<html>  
<head>  
    <title>Canvas快速入门</title>  
    <meta charset="utf-8"/>  
</head>  
<body>  
<div>  
    <canvas id="mainCanvas" width="640" height="480"></canvas>  
</div>  
</body>  
</html>

透過以下Javascript語句存取canvas元素：

//DOM写法   
window.onload = function () {   
    var canvas = document.getElementById("mainCanvas");   
    var context = canvas.getContext("2d");   
};   
//jQuery写法   
$(document).ready(function () {   
    var canvas = $("#mainCanvas");   
    var context = canvas.get(0).getContext("2d");   
});   
//接下来就可以调用context的方法来调用绘图API

2. 基礎API
2.1 座標系統
Canvas 2D渲染上下文採用平面笛卡爾座標系統，左上角為原點(0,0)，座標系統的1個單位相當於螢幕的1個像素。

//绘制一个填充矩形   
context.fillRect(x, y, width, height)   
//绘制一个边框矩形   
context.strokeRect(x, y, width, height)   
//清除一个矩形区域   
context.clearRect(x, y, width, height)

2.2.2 線條
繪製線條與繪製圖形有些區別，線條實際上稱為路徑。要繪製一條簡單的路徑，首先必須呼叫beginPath方法，接著呼叫moveTo設定路徑的起點座標，然後呼叫lineTo設定線段終點座標（可多次設定），再呼叫closePath完成路徑繪製。最後調用stroke繪製輪廓（或調用fill填充路徑）。以下為例子：

//示例   
context.beginPath();    //开始路径   
context.moveTo(40, 40);    //移动到点(40,40)   
context.lineTo(300, 40);    //画线到点(300,30)   
context.lineTo(40, 300);    //画线到点(40,300)   
context.closePath();    //结束路径   
context.stroke();    //绘制轮廓   
//或者填充用context.fill();

2.2.3 圓形
Canvas其實並沒有專門繪製圓形的方法，可以透過畫圓弧來模擬圓形。由於圓弧是一種路徑，畫圓弧的API應該包含在beginPath和closePath之間。
2.3 樣式
2.3.1 修改線條顏色

var color;   
//指定RGB值   
color = "rgb(255, 0, 0)";   
//指定RGBA值（最后一个参数为alpha值，取值0.0~1.0）   
color = "rgba(255, 0, 0, 1)";   
//指定16进制码   
color = "#FF0000";   
//用单词指定   
color = "red";   
//设置填充颜色   
context.fillStyle = color;   
//设置边框颜色   
context.strokeStyle = color;

2.3.2 修改線寬

//指定线宽值   
var value= 3;   
//设置边框颜色   
context.linewidth = value;

2.4 繪製文字

#//指定字體樣式

context.font = "italic 30px 黑體";

//在點(40,40)處畫文字

context.fillText("Hello world!", 40,

context.fillText("Hello world!", 40, 40);

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：
bootstrap裡如何統計table sum的數量

怎麼用JS做出切換隱藏與顯示同時切換圖示

怎麼用JS做出按鈕停用並啟用

######

以上是H5的CanvasAPI怎麼繪製圖形的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。