canvas基于語法（一）

1.什么是Canvas

canvas 是 HTML5 提供的一個用于展示繪圖效果的標簽.
canvas 原意畫布, 帆布. 在 HTML 頁面中用于展示繪圖效果.
最早 canvas 是蘋果提出的一個方案, 今天已經(jīng)在大多數(shù)瀏覽
器中實現(xiàn).

2.canvas 的使用領(lǐng)域

canvas 的使用領(lǐng)域很多:

游戲
可視化數(shù)據(jù)(重點)
banner 廣告
多媒體
5.未來
- 模擬仿真
- 遠程操作
- 圖形編輯

3.canvas基礎(chǔ)用法

//創(chuàng)建canvas標簽

var canvas = document.createElement( 'canvas' );
設(shè)置寬高
    canvas.width = 500;
    canvas.height = 400;
設(shè)置邊框
    canvas.style.border = '1px dashed red';
添加到頁面中
    document.body.appendChild( canvas );

獲取渲染畫板

// 獲得 CanvasRenderingContext2D 對象
    var context = canvas.getContext( '2d' );

3.1畫線

  context.moveTo( 0, 0 );
    // 繪制直線
    context.lineTo( 500, 400 );
    // 設(shè)置 起點
    context.moveTo( 0, 400 );
    // 繪制直線
    context.lineTo( 500, 0 );
    // 描邊顯示效果
    context.stroke();
    //填充效果
    context.fill();

4.非零環(huán)繞原則

如果需要判斷某一個區(qū)域是否需要填充顏色. 就從該區(qū)域中隨機的選取一個點.
從這個點拉一條直線出來, 一定要拉到圖形的外面. 此時以該點為圓心.
看穿過拉出的直線的線段. 如果是順時針方向就記為 +1, 如果是逆時針方向,
就記為 -1. 最終看求和的結(jié)果. 如果是 0 就不填充. 如果是非零就填充.

圖解：

1.png

5.閉合路勁與新路徑

closePath()

beginPath()

6.畫虛線

ctx.setLineDash( 數(shù)組 )
ctx.getLineDash()
ctx.lineDashOffset = 值
--------------------------------
   ctx.moveTo( 100, 90 );
    ctx.lineTo( 100, 110 );
    ctx.moveTo( 300, 90 );
    ctx.lineTo( 300, 110 );

    ctx.moveTo( 100, 140 );
    ctx.lineTo( 100, 160 );
    ctx.moveTo( 300, 140 );
    ctx.lineTo( 300, 160 );

    ctx.moveTo( 100, 190 );
    ctx.lineTo( 100, 210 );
    ctx.moveTo( 300, 190 );
    ctx.lineTo( 300, 210 );
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo( 100, 100 );
    ctx.lineTo( 300, 100 );
    ctx.stroke();

    ctx.beginPath();
    ctx.setLineDash( [ 5, 5 ] );
    ctx.moveTo( 100, 150 );
    ctx.lineTo( 300, 150 );
    ctx.stroke();

    ctx.beginPath();
    ctx.lineDashOffset = -2;
    ctx.moveTo( 100, 200 );
    ctx.lineTo( 300, 200 );
    ctx.stroke();

圖解：

5.png

7.lineJoin商佛，lineCap 和lineWidth肥荔；

 ctx.moveTo( 100, 100 );
    ctx.lineTo( 300, 100 );
    ctx.stroke();

    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.moveTo( 100, 250 );
    ctx.lineTo( 300, 250 );
    ctx.stroke();

圖解：

2.png

    -----------------------------
描述:
        'butt' 表示兩端使用方形結(jié)束.
        'round' 表示兩端使用圓角結(jié)束.
        'square' 表示突出的圓角結(jié)束.
     ctx.lineWidth = 10;
    ctx.moveTo( 100, 100 );
    ctx.lineTo( 300, 100 );
    ctx.stroke();

    ctx.beginPath();
    ctx.lineCap =  'round';
    ctx.moveTo( 100, 130 );
    ctx.lineTo( 300, 130 );
    ctx.stroke();

    ctx.beginPath();
    ctx.lineCap =  'square';
    ctx.moveTo( 100, 160 );
    ctx.lineTo( 300, 160 );
    ctx.stroke();

圖解：

3.png

    -------------------------------
描述:
        'round' 使用圓角連接.
        'bevel' 使用平切連接.
        'miter' 使用直角轉(zhuǎn).
     ctx.lineWidth = 10;
    ctx.lineJoin = 'round';
    ctx.moveTo( 100, 100 );
    ctx.lineTo( 200, 200 );
    ctx.lineTo( 300, 100 );
    ctx.stroke();

    ctx.beginPath();
    ctx.lineJoin = 'bevel';
    ctx.moveTo( 100, 150 );
    ctx.lineTo( 200, 250 );
    ctx.lineTo( 300, 150 );
    ctx.stroke();

    ctx.beginPath();
    ctx.lineJoin = 'miter';
    ctx.moveTo( 100, 200 );
    ctx.lineTo( 200, 300 );
    ctx.lineTo( 300, 200 );
    ctx.stroke();

圖解：