Canvas簡(jiǎn)介
canvas作用：
- canvas元素可以讓用戶在網(wǎng)頁上繪制圖形；
canvas介紹
- HTML5中的canvas元素只是圖形容器，必須要使用
JavaScript腳本來繪制圖像；
- 畫布是一個(gè)矩形區(qū)域，可以控制其中的每一個(gè)像素；
- canvas給用戶提供多種繪制路徑、矩形、圓形、字符及添加圖像的方法；
- H5新增元素，IE8及之前版本不支持canvas。
canvas使用
創(chuàng)建canvas元素(行內(nèi)塊)
- 向H5頁面添加canvas元素，該元素和其它元素一樣，可以設(shè)置它的寬高等；
<canvas width="100px" height="100px" style="background-color:red"></canvas>
- 不可在canvas元素中間添加內(nèi)容，因?yàn)闊o法顯示；只有在瀏覽器不支持canvas時(shí)，才會(huì)顯示元素里面的內(nèi)容。
- 畫布的默認(rèn)大小為：300*150。
繪制
- canvas元素本身沒有繪制能力，所有的繪制工作都必須通過JavaScript來完成，步驟如下：
- 獲取元素；
- 獲取元素的上下文對(duì)象；
- 指定填充樣式等；
- 指定元素位置和大小。
<body>
<canvas class="draw"></canvas>
<script type="text/javascript">
var can = document.querySelector(".draw");
var ctx = can.getContext("2d");
ctx.fillStyle = "#f00";
ctx.fillRect(100,100,150,100);
</script>
</body>
應(yīng)用
實(shí)線
- 首先獲取上下文ctx；
-
ctx.moveTo(x,y);：指定起點(diǎn)；
-
ctx.lineTo(x,y);：指定終點(diǎn)；
-
ctx.stroke();：繪制。
<script>
<canvas class="beeline"></canvas>
<script>
//獲取元素
var beeline = document.querySelector(".beeline");
//獲取上下文元素
var ctx = beeline.getContext("2d");
//開始繪制
ctx.moveTo(100,100);
ctx.lineTo(250,50);
ctx.lineTo(50,10);
ctx.lineTo(10,10);
//結(jié)束繪制
ctx.stroke();
</script>
</body>
圓
- 獲取元素；
- 獲取上下文ctx；
- 指定填充樣式；
- 開始描繪路徑；
- 畫圖形；
ctx.arc(x,y,radius,startAngle,endAngle,[boolean,optional]anticlockwise);
<canvas class="circle"></canvas>
<script>
var circle = document.getElementsByClassName("circle")[0];
var ctx = circle.getContext("2d");
ctx.fillStyle = "#0f0";
ctx.beginPath();
ctx.arc(40,40,40,Math.PI/4,Math.PI*3/4,true);
ctx.closePath();
ctx.fill();
</script>
漸變
- 獲取元素；
- 獲取上下文ctx；
- 創(chuàng)建漸變效果grd：
var grd = ctx.createLinearGradient(x0,y0,x1,y1);
- 指定漸變效果開始、結(jié)束顏色：
grd.addColorStop(offset,color);；
grd.addColorStop(0.5,"#f00");
grd.addColorStop(1,"#0f0");
- 其中offset范圍為0~1，指定漸變顏色的范圍。
- 指定上下文填充樣式為漸變樣式；
- 指定填充大小，一般和漸變區(qū)域大小一樣。
<script>
var jianB = document.querySelector(".jianbian");
var ctx = jianB.getContext("2d");
var grd = ctx.createLinearGradient(10,10,200,100);
grd.addColorStop(0,"#f00");
grd.addColorStop(1,"#0f0");
ctx.fillStyle = grd;
ctx.fillRect(10,10,200,100);
</script>
圖像
- 獲取元素；
- 獲取上下文；
- 創(chuàng)建圖片
- 將圖片繪制到上下文中。
<canvas class="img"></canvas>
<script>
var drawImg = document.querySelector(".img");
var ctx = drawImg.getContext("2d");
var img = new Image();
img.src = "images/mage.png";
ctx.drawImage(img,50,20);
</script>
顏色、樣式以及陰影設(shè)置的屬性及方法
| 屬性 |
描述 |
| fillStyle |
設(shè)置或返回用于填充繪畫的顏色、漸變或模式 |
| strokeStyle |
設(shè)置或返回用于筆觸的顏色、漸變或模式 |
| shadowColor |
設(shè)置或返回用于陰影的顏色 |
| shadowBlur |
設(shè)置或返回用于陰影的模糊級(jí)別 |
| shadowOffsetX |
設(shè)置或返回陰影距形狀的水平距離 |
| shadowOffsetY |
設(shè)置或返回陰影距形狀的垂直距離 |
| 方法 |
描述 |
| createLinearGradient() |
創(chuàng)建線性漸變（用在畫布內(nèi)容上） |
| createPattern() |
在指定的方向上重復(fù)指定的元素 |
| createRadialGradient() |
創(chuàng)建放射狀/環(huán)形的漸變（用在畫布內(nèi)容上） |
| addColorStop() |
規(guī)定漸變對(duì)象中的顏色和停止位置 |
線條樣式
| 屬性 |
描述 |
| lineCap |
設(shè)置或返回線條的<span style="color:red">結(jié)束端點(diǎn)樣式</span> |
| lineJoin |
設(shè)置或返回兩條線相交時(shí)，所創(chuàng)建的<span style="color:red">拐角類型</span> |
| lineWidth |
設(shè)置或返回當(dāng)前的線條寬度 |
| miterLimit |
設(shè)置或返回最大斜接長(zhǎng)度 |
矩形
| 方法 |
描述 |
| rect() |
創(chuàng)建矩形 |
| fillRect() |
繪制“被填充”的矩形 |
| strokeRect() |
繪制矩形（無填充） |
| clearRect() |
在給定的矩形內(nèi)清除指定的像素 |
路徑相關(guān)方法
| 方法 |
描述 |
| fill() |
填充當(dāng)前繪圖（路徑） |
| stroke() |
繪制已定義的路徑 |
| beginPath() |
起始一條路徑，或重置當(dāng)前路徑 |
| moveTo() |
把路徑移動(dòng)到畫布中的指定點(diǎn)，不創(chuàng)建線條 |
| closePath() |
創(chuàng)建從當(dāng)前點(diǎn)回到起始點(diǎn)的路徑 |
| lineTo() |
添加一個(gè)新點(diǎn)，然后在畫布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條 |
| clip() |
從原始畫布剪切任意形狀和尺寸的區(qū)域 |
| quadraticCurveTo() |
創(chuàng)建二次貝塞爾曲線 |
| bezierCurveTo() |
創(chuàng)建三次方貝塞爾曲線 |
| arc() |
創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓） |
| arcTo() |
創(chuàng)建兩切線之間的弧/曲線 |
| isPointInPath() |
如果指定的點(diǎn)位于當(dāng)前路徑中，則返回 true，否則返回 false |
- 暫時(shí)只發(fā)現(xiàn)畫曲線時(shí)需要開啟/關(guān)閉路徑。
轉(zhuǎn)換
| 方法 |
描述 |
| scale() |
縮放當(dāng)前繪圖至更大或更小 |
| rotate() |
旋轉(zhuǎn)當(dāng)前繪圖 |
| translate() |
重新映射畫布上的 (0,0) 位置 |
| transform() |
替換繪圖的當(dāng)前轉(zhuǎn)換矩陣 |
| setTransform() |
將當(dāng)前轉(zhuǎn)換重置為單位矩陣。然后運(yùn)行 transform() |
文本的相關(guān)屬性和方法
| 屬性 |
描述 |
| font |
設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性 |
| textAlign |
設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式 |
| textBaseline |
設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線 |
| 方法 |
描述 |
| fillText() |
在畫布上繪制“被填充的”文本 |
| strokeText() |
在畫布上繪制文本（無填充） |
| measureText() |
返回包含指定文本寬度的對(duì)象 |
圖像繪制方法
| 方法 |
描述 |
| drawImage() |
向畫布上繪制圖像、畫布或視頻 |
像素操作相關(guān)的屬性和方法
| 屬性 |
描述 |
| width |
返回 ImageData 對(duì)象的寬度 |
| height |
返回 ImageData 對(duì)象的高度 |
| data |
返回一個(gè)對(duì)象，其包含指定的ImageData對(duì)象的圖像數(shù)據(jù) |
| 方法 |
描述 |
| createImageData() |
創(chuàng)建新的、空白的ImageData對(duì)象 |
| getImageData() |
返回ImageData對(duì)象，該對(duì)象為畫布上指定的矩形復(fù)制像素?cái)?shù)據(jù) |
| putImageData() |
把圖像數(shù)據(jù)（從指定的 ImageData 對(duì)象）放回畫布上 |
合成
| 屬性 |
描述 |
| globalAlpha |
設(shè)置或返回繪圖的當(dāng)前 alpha 或透明值 |
| globalCompositeOperation |
設(shè)置或返回新圖像如何繪制到已有的圖像上 |
其他
| 方法 |
描述 |
| save() |
保存當(dāng)前環(huán)境的狀態(tài) |
| restore() |
返回之前保存過的路徑狀態(tài)和屬性 |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
