一、什么是Canvas？
HTML5的canvas元素使用JavaScript在網頁上繪制影像；
畫布是一個矩形區域，可以控制其每一像素；
canvas擁有多種繪制路徑，矩形，圓形，字符以及添加影像的方法
canvas的應用---主要是資料可視化
二、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();
三、canvas的基本使用
- 圖形的繪制
1-描邊 stroke();
/*畫平行線*/
ctx.moveTo(100,100.5);
ctx.lineTo(300,100.5);
ctx.moveTo(100,200);
ctx.lineTo(300,200);
/*描邊*/
ctx.stroke();
注意點：
1、線的問題
線條的默認寬度是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();
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/240418.html
標籤：JavaScript
上一篇：理解js閉包9大使用場景
下一篇：第五章 UI層松耦合