H5的CanvasAPI怎麼繪製圖形
- php中世界最好的语言原創
- 2018-01-09 09:51:022403瀏覽
這次帶給大家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的方法来调用绘图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,
context.fillText("Hello world!", 40, 40);
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
bootstrap裡如何統計table sum的數量
以上是H5的CanvasAPI怎麼繪製圖形的詳細內容。更多資訊請關注PHP中文網其他相關文章！