canvas--總結一

1、什麼是Canvas？

HTML5的canvas元素使用JavaScript在網頁上繪製圖像；

畫布是一個矩形區域，能夠控制其每一像素；

canvas擁有多種繪製路徑，矩形，圓形，字符以及添加圖像的方法

canvas的應用---主要是數據可視化

 

2、canvas的基礎繪製體驗

• 建立canvas元素

在HTML5頁面中添加canvas元素，規定元素的id，寬度和高度（默認寬高300*150）：

<canvas width="600" height="400" ></canvas>

• canvas座標系

  

• 經過JavaScript繪製

// 獲取元素
var myCanvas=document.querySelector("canvas"); //獲取繪圖工具
var ctx=myCanvas.getContext("2d"); //設置繪圖的起始位置
ctx.moveTo(x0,y0); //設置繪圖的路徑
ctx.lineTo(endX,endY); //描邊
ctx.stroke();

 

3、canvas的基本使用

• 圖形的繪製

1-描邊 stroke();

    /*畫平行線*/ ctx.moveTo(100,100.5); ctx.lineTo(300,100.5); ctx.moveTo(100,200); ctx.lineTo(300,200); /*描邊*/ ctx.stroke();

注意點：

一、線的問題

線條的默認寬度是1px,默認顏色爲黑色

致使產生的問題：

對齊的點是線的中心位置  會把線分紅兩個0.5px 顯示的是會不飽和增長寬度

解決方案：

先後移動0.5px

 

2-填充 fill();  

    /*1.繪製一個三角形*/ ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.lineTo(200,200); /*起始點和lineTo的結束點沒法徹底閉合缺角*/
    /*使用canvas的自動閉合 */
    //ctx.lineTo(100,100);
    /*關閉路徑*/ ctx.closePath();
    //ctx.fill();

注意點：手動閉合：起始點和lineTo的結束點沒法徹底閉合缺角

使用canvas的自動閉合---ctx.closePath();

開啓新的路徑：cyx.beginPath();--須要繪製不一樣樣式的路徑時開啓新路徑，避免形成覆蓋樣式

 填充規則：非零環繞--從你須要判斷的填充區域拉一根線出去，和這根線會有若干條線與之相交，去看和它相交的軌跡；若是是順時針相交加1，逆時針相交減1；將判斷得出的數加起來，若是等於0則這個區域不填充，不等於0則填充。

 

• 設置樣式

畫筆的狀態：

lineWidth      線寬，默認1px;

lineCap         線末端類型：（butt默認）、round（圓頭端）、square（平頭端）

lineJoin         相交線的拐點： （miter 默認-尖頭）、round（圓端）、bevel（平端）

strokeStyle    線的顏色

fillStyle         填充的顏色

setLineDash()    設置虛線 --參數爲一個數組（數組是用來描述你的排列方式的）

getLineDash()    獲取虛線寬度集合（獲取虛線的排列方式 獲取的是不重複的那一段的排列方式）

lineDashOffset  設置虛線的偏移量（負值向右偏移）

 

/*畫線*/ ctx.moveTo(100,100.5); ctx.lineTo(300,100.5); /*[5,10] 數組是用來描述你的排列方式的*/ ctx.setLineDash([4,10,20]); /*獲取虛線的排列方式 獲取的是不重複的那一段的排列方式*/
// console.log(ctx.getLineDash()); /*若是是正的值 日後偏移*/
/*若是是負的值 往前偏移*/
// ctx.lineDashOffset = -20;
ctx.stroke();