溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下H5的CanvasAPI如何繪制圖形，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
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的方法來調用繪圖API2. 基礎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, 40);
看完了這篇文章，相信你對H5的CanvasAPI如何繪制圖形有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
