【Canvas】(1)---概述+簡單示例

時間 2020-04-25

標籤 Canvas 概述簡單示例简体版

原文原文鏈接

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概述

二、Canvas學習筆記

三、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 簡明教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

【Canvas】(1)---概述+簡單示例

Canvas---概述+簡單示例

1、canvas概述

一、什麼是canvas

二、canvas的特性

三、canvas應用領域

2、canvas繪圖基礎

一、繪製畫布

二、 繪製基本路徑

3、繪製線示例

一、畫一條線

二、繪製平行線

三、繪製三角形

四、繪製正方形

五、設置樣式

參考

二、繪製基本路徑