本章節講解Canvas如何結合 Openlayer ?使用,首先我們講解Canvas的繪圖基礎。
我們初始化地圖的時候可以看見,實際上Openlayer的地圖就是用Canvas實現繪制的。
Canvas繪制基本概念
什么是canvas?HTML5 <canvas> ? 元素用于圖形的繪制,區別于css,它的繪制通過 JavaScript ?來完成繪制。
<canvas> ? 標簽只是 圖形容器 ?,您必須使用腳本來繪制圖形
Canvas API主要聚焦于2D圖形。同樣使用<canvas>元素的 ?WebGL API ?則用于繪制硬件加速的2D和3D圖形。
繪制矩形
2.1設置canvas元素
<!-- 1、設置canvas元素 -->
<canvas?id="canvas"?width="200"?height="200"></canvas>
<script>
2.2獲取canvas
? ?/* 2、獲取canvas */
? ??const?canvas =?document.getElementById("canvas");
2.3獲取上下文
返回一個對象,對象包含繪制圖形的方法和屬性???????
/* 3、getContext()返回一個對象,對象包含繪制圖形的方法和屬性 */
? ??const?ctx = canvas.getContext("2d");
2.4執行繪制???????
? ? ?/* 4、執行繪制fillRect(x,y,width,height) x,y*/
? ? ctx.fillRect(10,10,100,100);
? ? ctx.fillStyle=?"#333"
2.5完整代碼示例:
<!DOCTYPE?html>
<html?lang="en">
??<head>
? ??<meta?charset="UTF-8">
? ??<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
? ??<meta?name="viewport"?content="width=device-width, initial-scale=1.0">
? ??<title>Document</title>
??</head>
??<body>
? ??<!-- 1、設置canvas元素 -->
? ??<canvas?id="canvas"?width="200"?height="200"></canvas>
? ??<script>
? ? ??/* 2、獲取canvas */
? ? ??const?canvas =?document.getElementById("canvas");
? ? ??/* 3、getContext()返回一個對象,對象包含繪制圖形的方法和屬性 */
? ? ??const?ctx = canvas.getContext("2d");
? ? ??/* 4、執行繪制fillRect(x,y,width,height) x,y*/
? ? ? ctx.fillRect(10,?10,?100,?100);
? ? ? ctx.fillStyle?=?"#333";
? ??</script>
??</body>
</html>
繪制線
canvas 是一個二維網格
canvas 的左上角坐標為 (0,0)
上面的 fillRect 方法擁有參數 (0,0,100,,100)。
意思是:在左上角開始 (0,0)的位置,繪制100*100的圖形
3.1路徑
在Canvas上畫線,我們將使用以下兩種方法:
moveTo(x,y) 定義線條開始坐標
lineTo(x,y) 定義線條結束坐標
繪制線條我們必須使用到 "link" 的 stroke() 方法,執行繪制。
下面我們來試一下在canvas中實現線的繪制
3.2設置canvas元素???????
?<!-- 1、設置canvas元素 -->
? ??<canvas?id="canvas"?width="200"?height="200"></canvas>
? ??<script>
3.3獲取canvas元素???????
/* 2、獲取canvas */
const?canvas =?document.getElementById("canvas");
3.4獲取上下文???????
/* 3、獲取上下文 */
const?ctx = canvas.getContext("2d");
3.5設置起點和終點
起點???????
/* 4、moveTo設置起點坐標 */
ctx.moveTo(10,?10);
終點???????
/* 5、設置終點坐標 lineTo */
ctx.lineTo(100,?100);
3.6執行繪制???????
/* 6、執行繪制 */
ctx.strokeStyle?=?"#ff2d51";
ctx.stroke();
完整代碼:
<!DOCTYPE?html>
<html?lang="en">
<head>
? ??<meta?charset="UTF-8">
? ??<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
? ??<meta?name="viewport"?content="width=device-width, initial-scale=1.0">
? ??<title>Document</title>
</head>
<body>
? ??<!-- 1、設置canvas元素 -->
? ??<canvas?id="canvas"?width="200"?height="200"></canvas>
? ??<script>
? ? ? ??/* 2、獲取canvas */
? ? ? ??const?canvas =?document.getElementById("canvas");
? ? ? ??/* 3、獲取上下文 */
? ? ? ??const?ctx = canvas.getContext("2d");
? ? ? ??/* 4、moveTo設置起點坐標 */
? ? ? ? ctx.moveTo(10,?10);
? ? ? ??/* 5、設置終點坐標 lineTo */
? ? ? ? ctx.lineTo(100,?100);
? ? ? ??/* 6、執行繪制 */
? ? ? ? ctx.strokeStyle?=?"#ff2d51";
? ? ? ? ctx.stroke();
? ??</script>
</body>
</html>