【Canvas】(1)---概述+簡單示例
Canvas---概述+簡單示例
若是通俗的去理解Canvas,咱們能夠去理解成它相似於咱們電腦自帶的畫圖工具同樣，canvas首先是選擇一塊畫布，而後在這個畫布上描繪咱們想畫的東西，畫好後展現給用戶看。javascript
固然它不只能夠畫動態圖片，甚至能夠畫出3D效果出來。html
1、canvas概述
一、什麼是canvas
canvas 是HTML5提供的一種新標籤。java
<canvas></canvas>
canvas 標籤只是圖形容器，至關於一個畫布，canvas 元素自己是沒有繪圖能力的。全部的繪製工做必須在 JavaScript 內部完成，至關於使用畫筆在畫布上畫畫。web
canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。canvas
二、canvas的特性
1.互動性：canvas支持互動，能夠很好的響應用戶的操做，咱們能夠經過Javascript來監鍵盤，鼠標，及其觸摸設備相關事件。瀏覽器
2.動 畫：任何被canvas繪製的圖形均可以添加動畫，簡單的彈跳球或者複雜的HTML5遊戲均可以實現。編輯器
3.靈活性：開發人員可使用canvas來繪製任何的內容，好比，直線，圖形，文字，圖片等，能夠包含動畫或者不包含。同時你能夠添加音頻或者視頻瀏覽器支持。工具
4.流行度：canvas目前很流行，不少的開發人員都使用它來開發相似遊戲或者繪圖類應用。學習
5.web標準：只須要有瀏覽器就能夠運行，而非flash或者silverlight，須要安裝相關的插件。動畫
三、canvas應用領域
1.可視化數據： 各種統計圖表，好比:百度的echart
2.場景秀：用canvas實現動態的廣告效果可以很是融洽的跨平臺運行。如:手機中微產品.在移動端兼容性很好。
3.遊戲：canvas在基於Web的圖像顯示方面比Flash更加立體、更加精巧，canvas成爲HTML5小遊戲開發首選。
4.其餘可嵌入網站的內容 (多用於活動頁面、特效)：相似圖表、音頻、視頻，還有許多元素可以更好地與Web融合，而且不須要任何插件。
5.趨勢=> 模擬器： 不管從視覺效果仍是核心功能方面來講，模擬器產品能夠徹底由JavaScript來實現。模擬真實硬件環境,如移動端各類類型手機.
6.趨勢=> 遠程計算機控制： Canvas可讓開發者更好地實現基於Web的數據傳輸，構建一個完美的可視化控制界面。
7.趨勢=> 圖形編輯器： Photoshop圖形編輯器將可以100%基於Web實現。
2、canvas繪圖基礎
一、繪製畫布
<body>
<!--1.準備畫布 畫布默認白色的 默認長寬300*150-->
<!--1.1 設置畫布的大小 width="600" height="400" -->
<canvas width="600" height="400" ></canvas>
<!--2.準備繪製工具-->
<script>
/*1.獲取元素*/
var myCanvas = document.querySelector('canvas');
/*2.獲取上下文 繪製工具箱 2d表明是2d效果 3d就是指3d效果 3d只有IE11才支持*/
var ctx = myCanvas.getContext('2d');
</script>
</body>
context 是一個封裝了不少繪圖功能的對象，咱們在頁面中建立一個 canvas 標籤以後，首先要使用 getContext() 獲取 canvas 的上下文環境getContext("2d") 對象是內
建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
以上代碼咱們經過canvas取到2D的context。在HTML5 Canvas的2D結構中，座標（0,0）在左上方，這和傳統的座標不太同樣。你們須要注意一下，以下圖所示：
二、 繪製基本路徑
1)、繪製起點(moveTo)
* 語法：ctx.moveTo(x, y); * 解釋：設置上下文繪製路徑的起點。至關於移動畫筆到某個位置 * 參數：x,y 都是相對於 canvas盒子的最左上角。 * 注意：**繪製線段前必須先設置起點，否則繪製無效。**
2)、繪製直線(lineTo)
* 語法：ctx.lineTo(x, y); * 解釋：從x,y的位置繪製一條直線到起點或者上一個線頭點。 * 參數：x,y 線頭點座標。
3)、路徑開始和閉合
* 開始路徑：ctx.beginPath(); * 閉合路徑：ctx.closePath(); * 解釋：若是複雜路徑繪製，必須使用路徑開始和結束。閉合路徑會自動把最後的線頭和開始的線頭連在一塊兒。 * beginPath: 核心的做用是將 不一樣繪製的形狀進行隔離， 每次執行此方法，表示從新繪製一個路徑,跟以前的繪製的墨跡能夠進行分開樣式設置和管理。
4)、描邊(stroke)
* 語法：ctx.stroke(); * 解釋：根據路徑繪製線。路徑只是草稿，真正繪製線必須執行stroke
5)、總結
canvas繪製的基本步驟：
第一步：得到上下文 =>canvasElem.getContext('2d');
第二步：開始路徑規劃 =>ctx.beginPath()
第三步：移動起始點 =>ctx.moveTo(x, y)
第四步：繪製線(矩形、圓形、圖片...) =>ctx.lineTo(x, y)
第五步：閉合路徑 =>ctx.closePath();
第六步：繪製描邊 =>ctx.stroke();
3、繪製線示例
一、畫一條線
代碼
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{ border: 2px solid #00CED1; }
</style>
</head>
<body>
<canvas width="300" height="200" ></canvas>
<script>
/*1.獲取元素*/
var myCanvas = document.querySelector('canvas');
/*2.獲取上下文 繪製工具箱 */
var ctx = myCanvas.getContext('2d');
/*3.移動畫筆*/
ctx.moveTo(100,100);
/*4.繪製直線 (軌跡，繪製路徑)*/
ctx.lineTo(200,100);
/*5.描邊*/
ctx.stroke();
</script>
</body>
</html>
運行效果
二、繪製平行線
代碼
/*上面代碼部分省略*/
/*第一條線*/
ctx.moveTo(100,100);
ctx.lineTo(200,100);
/*第二條線*/
ctx.moveTo(100,150);
ctx.lineTo(200,150);
/*描邊*/
ctx.stroke();
運行結果
三、繪製三角形
代碼
/*1.繪製一個三角形*/
ctx.moveTo(100,100);
//第一條線
ctx.lineTo(150,100);
//第二條線
ctx.lineTo(150,150);
/*第三條線使用canvas的自動閉合 */
ctx.closePath();
//修改寬度
ctx.lineWidth = 5;
/*2.描邊*/
ctx.stroke();
運行結果
四、繪製正方形
代碼
/*1.繪製兩個正方形 一大200一小100 套在一塊兒*/
ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.lineTo(300,300);
ctx.lineTo(100,300);
ctx.closePath();
//第二個正方形
ctx.moveTo(150,150);
ctx.lineTo(150,250);
ctx.lineTo(250,250);
ctx.lineTo(250,150);
ctx.closePath();
/*2.去填充*/
//ctx.stroke();
ctx.fillStyle = 'red';
ctx.fill();
運行結果
重點： 在上面填充的時候回遵循非零環繞規則,這句話要理解是挺好理解的，解釋起來不大好解釋，具體能夠參考這篇文章Canvas教程(21)——非零環繞原則
五、設置樣式
這裏展現一些經常使用的設置樣式的方法，具體就不作示例演示了。
- lineWidth 線寬，默認1px - lineCap 線末端類型：(butt默認)、round、square - lineJoin 相交線的拐點 miter(默認)、round、bevel - strokeStyle 線的顏色 - fillStyle 填充顏色 - setLineDash() 設置虛線 - getLineDash() 獲取虛線寬度集合 - lineDashOffset 設置虛線偏移量（負值向右偏移）
參考
一、 Canvas概述
別人罵我胖，我會生氣，由於我內心認可了我胖。別人說我矮，我就會以爲可笑，由於我內心知道我不可能矮。這就是咱們爲何會對別人的攻擊生氣。 攻我盾者，乃我心裏之矛(9) )。
- 1. SpringData概述+簡單查詢示例(一)
- 2. Spring - 1.簡單概述
- 3. Mybatis - 1.簡單概述
- 4. EJB3.0完整示例教程(1)----概述
- 5. Flume概述和簡單實例
- 6. B樹概述與簡單應用示例(C#)
- 7. JVM簡單概述
- 8. NoSQL簡單概述
- 9. Netty簡單概述
- 10. FPGA簡單概述
- 更多相關文章...
- • Thymeleaf+SpringMVC5示例 - Thymeleaf 教程
- • Thymeleaf Servlet Hellow World示例 - Thymeleaf 教程
- • Java Agent入門實戰（二）-Instrumentation源碼概述
- • Github 簡明教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. SpringData概述+簡單查詢示例(一)
- 2. Spring - 1.簡單概述
- 3. Mybatis - 1.簡單概述
- 4. EJB3.0完整示例教程(1)----概述
- 5. Flume概述和簡單實例
- 6. B樹概述與簡單應用示例(C#)
- 7. JVM簡單概述
- 8. NoSQL簡單概述
- 9. Netty簡單概述
- 10. FPGA簡單概述