一、canvas簡(jiǎn)介
1.1 什么是canvas？（了解）
- 是HTML5提供的一種新標(biāo)簽
<canvas></canvas>
英 ['k?nv?s] 美 ['k?nv?s] 帆布 畫布
- Canvas是一個(gè)矩形區(qū)域的畫布，可以用JavaScript在上面繪畫。控制其每一個(gè)像素。
- canvas 標(biāo)簽使用 JavaScript 在網(wǎng)頁上繪制圖像，本身不具備繪圖功能。
- canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
- HTML5之前的web頁面只能用一些固定樣式的標(biāo)簽：比如p、div、h1等
1.2 canvas主要應(yīng)用的領(lǐng)域（了解）
游戲：canvas在基于Web的圖像顯示方面比Flash更加立體、更加精巧，canvas游戲在流暢度和跨平臺(tái)方面更牛。
25 超棒的 HTML5 Canvas 游戲可視化數(shù)據(jù).數(shù)據(jù)圖表話，比如:百度的echart
banner廣告：Flash曾經(jīng)輝煌的時(shí)代，智能手機(jī)還未曾出現(xiàn)。現(xiàn)在以及未來的智能機(jī)時(shí)代，HTML5技術(shù)能夠在banner廣告上發(fā)揮巨大作用，用Canvas實(shí)現(xiàn)動(dòng)態(tài)的廣告效果再合適不過。
未來=> 模擬器：無論從視覺效果還是核心功能方面來說，模擬器產(chǎn)品可以完全由JavaScript來實(shí)現(xiàn)。
未來=> 遠(yuǎn)程計(jì)算機(jī)控制：Canvas可以讓開發(fā)者更好地實(shí)現(xiàn)基于Web的數(shù)據(jù)傳輸，構(gòu)建一個(gè)完美的可視化控制界面。
未來=> 圖形編輯器：Photoshop圖形編輯器將能夠100%基于Web實(shí)現(xiàn)。
其他可嵌入網(wǎng)站的內(nèi)容(多用于活動(dòng)頁面、特效)：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，并且不需要任何插件。
完整的canvas移動(dòng)化應(yīng)用
-
我們課程的目標(biāo)
- 我們不是主要做游戲開發(fā)的
- 要求必須會(huì)做基本的用canvas繪制的特效頁面：比如，傳智前端官網(wǎng)。
- 會(huì)用canvas做一些簡(jiǎn)單的廣告、活動(dòng)頁面
我們課程的案例和項(xiàng)目演示
-
canvas的標(biāo)準(zhǔn)：
- 最新標(biāo)準(zhǔn)：http://www.w3.org/TR/2dcontext/
- 穩(wěn)定版本的標(biāo)準(zhǔn)：http://www.w3.org/TR/2013/CR-2dcontext-20130806/
- 目前來說，標(biāo)準(zhǔn)還在完善中。先用早期的api足夠完成所有的應(yīng)用
二、canvas繪圖基礎(chǔ)
2.0 sublime配置canvas插件（推薦）
推薦：
安裝插件：AndyJS2
github地址： https://github.com/malun666/AndyJS2
直接下載到：X:\Users\用戶名\AppData\Roaming\Sublime Text 3\Packages
2.1 Canvas標(biāo)簽
2.1.1 canvas標(biāo)簽語法和屬性 （重點(diǎn)）
- canvas：畫布油布的意思 ==英 ['k?nv?s] 美 ['k?nv?s] ==
- 標(biāo)簽名canvas，需要進(jìn)行閉合。就是一普通的html標(biāo)簽。
- 可以設(shè)置width和height屬性，但是屬性值單位必須是px，否則忽略。
- width和hegiht：默認(rèn)300*150像素
- 注意：
- 不要用CSS控制它的寬和高,會(huì)走出圖片拉伸，
- 重新設(shè)置canvas標(biāo)簽的寬高屬性會(huì)讓畫布擦除所有的內(nèi)容。
- 可以給canvas畫布設(shè)置背景色
2.1.2 瀏覽器不兼容處理（重點(diǎn)）
- ie9以上才支持canvas, 其他chrome、ff、蘋果瀏覽器等都支持
- 只要瀏覽器兼容canvas，那么就會(huì)支持絕大部分api(個(gè)別最新api除外)
- 移動(dòng)端的兼容情況非常理想，基本上隨便使用
- 2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
- 如果瀏覽器不兼容，最好進(jìn)行友好提示
例如：
<canvas id="cavsElem">
你的瀏覽器不支持canvas，請(qǐng)升級(jí)瀏覽器.瀏覽器不支持，顯示此行文本
</canvas>
- 瀏覽器不兼容，可以使用flash等手段進(jìn)行優(yōu)雅降級(jí)
2.2 canvas繪圖上下文context
2.2.1 Context：Canvas的上下文、繪制環(huán)境。（重點(diǎn)掌握）
- 上下文：上知天文，下知地理。是所有的繪制操作api的入口或者集合。
- Canvas自身無法繪制任何內(nèi)容。Canvas的繪圖是使用JavaScript操作的。
- Context對(duì)象就是JavaScript操作Canvas的接口。
*使用[CanvasElement].getContext(‘2d’)來獲取2D繪圖上下文。
var canvas = document.getElementById( 'cavsElem' ); //獲得畫布
var ctx = canvas.getContext( '2d' );//注意：2d小寫， 3d：webgl
2.3 基本的繪制路徑（重點(diǎn)）
2.3.1 canvas坐標(biāo)系
canvas坐標(biāo)系，從最左上角0,0開始。x向右增大， y向下增大
<img src="imgs/canvas-x-y.png" height="532" width="730">
2.3.2 設(shè)置繪制起點(diǎn)(moveTo)
* 語法：ctx.moveTo(x, y);
* 解釋：設(shè)置上下文繪制路徑的起點(diǎn)。相當(dāng)于移動(dòng)畫筆到某個(gè)位置
* 參數(shù)：x,y 都是相對(duì)于 canvas盒子的最左上角。
* 注意：**繪制線段前必須先設(shè)置起點(diǎn)，不然繪制無效。**
2.3.3 繪制直線(lineTo)
* 語法：ctx.lineTo(x, y);
* 解釋：從x,y的位置繪制一條直線到起點(diǎn)或者上一個(gè)線頭點(diǎn)。
* 參數(shù)：x,y 線頭點(diǎn)坐標(biāo)。
2.3.4 路徑開始和閉合
* 開始路徑：ctx.beginPath();
* 閉合路徑：ctx.closePath();
* 解釋：如果復(fù)雜路徑繪制，必須使用路徑開始和結(jié)束。閉合路徑會(huì)自動(dòng)把最后的線頭和開始的線頭連在一起。
* beginPath: 核心的作用是將 不同繪制的形狀進(jìn)行隔離，
每次執(zhí)行此方法，表示重新繪制一個(gè)路徑,跟之前的繪制的墨跡可以進(jìn)行分開樣式設(shè)置和管理。
2.3.5 描邊(stroke)
* 語法：ctx.stroke();
* 解釋：根據(jù)路徑繪制線。路徑只是草稿，真正繪制線必須執(zhí)行stroke
* stroke: （用筆等）畫；輕撫；輕挪；敲擊；劃尾槳；劃掉；（打字時(shí)）擊打鍵盤
英 [str??k] 美 [strok]
- canvas繪制的基本步驟：
- 第一步：獲得上下文 =>canvasElem.getContext('2d');
- 第二步：開始路徑規(guī)劃 =>ctx.beginPath()
- 第三步：移動(dòng)起始點(diǎn) =>ctx.moveTo(x, y)
- 第四步：繪制線(矩形、圓形、圖片...) =>ctx.lineTo(x, y)
- 第五步：閉合路徑 =>ctx.closePath();
- 第六步：繪制描邊 =>ctx.stroke();
html部分：
<canvas id="cavsElem">
你的瀏覽器不支持canvas，請(qǐng)升級(jí)瀏覽器
</canvas>
javascript部分：
//===============基本繪制api====================
//獲得畫布
var canvas = document.querySelector('#cavsElem');
var ctx = canvas.getContext('2d'); //獲得上下文
canvas.width = 900; //設(shè)置標(biāo)簽的屬性寬高
canvas.height = 600; //千萬不要用 canvas.style.height
canvas.style.border = "1px solid #000";
//繪制三角形
ctx.beginPath(); //開始路徑
ctx.moveTo(100,100); //三角形，左頂點(diǎn)
ctx.lineTo(300, 100); //右頂點(diǎn)
ctx.lineTo(300, 300); //底部的點(diǎn)
ctx.closePath(); //結(jié)束路徑
ctx.stroke(); //描邊路徑
- 綜合案例：02繪制定位表格.html
- 綜合案例：03畫畫板.html
2.3.7 填充(fill)
* 語法：ctx.fill();
* 解釋：填充，是將閉合的路徑的內(nèi)容填充具體的顏色。默認(rèn)黑色。
* 注意：交叉路徑的填充問題，“非零環(huán)繞原則”，順逆時(shí)針穿插次數(shù)決定是否填充。
以下是非0環(huán)繞原則的原理：（了解即可，非常少會(huì)用到復(fù)雜的路徑）
“非零環(huán)繞規(guī)則”是這么來判斷有自我交叉情況的路徑的：對(duì)于路徑中的任意給定區(qū)域，從該區(qū)域內(nèi)部畫一條足夠長(zhǎng)的線段，
使此線段的終點(diǎn)完全落在路徑范圍之外。
圖2-14中的那三個(gè)箭頭所描述的就是上面這個(gè)步驟。
接下來，將計(jì)數(shù)器初始化為0，
然后，每當(dāng)這條線段與路徑上的直線或曲線相交時(shí)，
就改變計(jì)數(shù)器的值。如果是與路徑的順時(shí)針部分相交，則加1，
如果是與路徑的逆時(shí)針部分相交，則減1。若計(jì)數(shù)器的最終值不是0，那么此區(qū)域就在路徑里面，在調(diào)用fill()方法時(shí)，
瀏覽器就會(huì)對(duì)其進(jìn)行填充。
如果最終值是0，那么此區(qū)域就不在路徑內(nèi)部，瀏覽器也就不會(huì)對(duì)其進(jìn)行填充了
* 案例： 04填充矩形.html
Paste_Image.png
2.3.8 快速創(chuàng)建矩形rect()方法
* 語法：ctx.rect(x, y, width, height);
* 解釋：x, y是矩形左上角坐標(biāo)， width和height都是以像素計(jì)
* rect方法只是規(guī)劃了矩形的路徑，并沒有填充和描邊。
* 改造案例：04填充矩形.html
*rect: abbr. 矩形（rectangular）；收據(jù)（receipt）
2.3.9 快速創(chuàng)建描邊矩形和填充矩形
* 語法： ctx.strokeRect(x, y, width, height);
- 參數(shù)跟2.3.8相同，注意此方法繪制完路徑后立即進(jìn)行stroke繪制
* 語法：ctx.fillRect(x, y, width, height);
- 參數(shù)跟2.3.8相同， 此方法執(zhí)行完成后。立即對(duì)當(dāng)前矩形進(jìn)行fill填充。
2.3.10 清除矩形(clearRect)
* 語法：ctx.clearRect(x, y, width, hegiht);
* 解釋：清除某個(gè)矩形內(nèi)的繪制的內(nèi)容，相當(dāng)于橡皮擦。
2.4 繪制圓形（arc)
- 概述：arc() 方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）。
- 語法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
- arc: 弧（度）弧形物；天穹 英 [ɑ?k] 美 [ɑrk]
- counter 反擊，還擊；反向移動(dòng)，對(duì)著干；反駁，回答 ['ka?nt?] 美 ['ka?nt?]
- 解釋：
- x,y：圓心坐標(biāo)。
- r：半徑大小。
- sAngle:繪制開始的角度。 圓心到最右邊點(diǎn)是0度，順時(shí)針方向弧度增大。
- eAngel:結(jié)束的角度，注意是弧度。π
- counterclockwise：是否是逆時(shí)針。true是逆時(shí)針，false：順時(shí)針
- 弧度和角度的轉(zhuǎn)換公式： rad = deg*Math.PI/180;
- 在Math提供的方法中sin、cos等都使用的弧度
- 案例：05繪制圓形.html
- 案例：06繪制餅狀圖.html
2.5 繪制文字（會(huì)使用就可以了）
2.5.1 繪制上下文的文字屬性 （有印象就行了）
- font 設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性
- font 屬性使用的語法與 CSS font 屬性相同。
例如：ctx.font = "18px '微軟雅黑'";
- textAlign 設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式
- start : 默認(rèn)。文本在指定的位置開始。
- end : 文本在指定的位置結(jié)束。
- center: 文本的中心被放置在指定的位置。
- left : 文本左對(duì)齊。
- right : 文本右對(duì)齊。
* 例如：ctx.textAlign = 'left';
對(duì)齊圖片
- textBaseline 設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線
- alphabetic ： 默認(rèn)。文本基線是普通的字母基線。
- top ： 文本基線是 em 方框的頂端。。
- hanging ： 文本基線是懸掛基線。
- middle ： 文本基線是 em 方框的正中。
- ideographic： 文本基線是em基線。
- bottom ： 文本基線是 em 方框的底端。
例如： ctx.textBaseline = 'top';
單詞:
alphabetic: 字母的；照字母次序的 [,?lf?'b?t?k]
ideographic：表意的；表意字構(gòu)成的 英 [,?d???'ɡr?f?k] 美 [,?d??'gr?f?k]
設(shè)置文字為主
2.5.2 上下文繪制文字方法
* ctx.fillText() 在畫布上繪制“被填充的”文本
* ctx.strokeText() 在畫布上繪制文本（無填充）
* ctx.measureText() 返回包含指定文本寬度的對(duì)象
* 單詞：measure 測(cè)量；估量；權(quán)衡 英 ['me??] 美 ['m???]
//綜合案例代碼：
ctx.moveTo( 300, 300 );
ctx.fillStyle = "purple"; //設(shè)置填充顏色為紫色
ctx.font = '20px "微軟雅黑"'; //設(shè)置字體
ctx.textBaseline = "bottom"; //設(shè)置字體底線對(duì)齊繪制基線
ctx.textAlign = "left"; //設(shè)置字體對(duì)齊的方式
//ctx.strokeText( "left", 450, 400 );
ctx.fillText( "Top-g", 100, 300 ); //填充文字
2.5.3 案例07文字繪制.html
2.6 繪制圖片（drawImage） （重點(diǎn)）
2.6.1 基本繪制圖片的方式
context.drawImage(img,x,y);
參數(shù)說明： x,y 繪制圖片左上角的坐標(biāo)， img是繪制圖片的dom對(duì)象。
2.6.2 在畫布上繪制圖像，并規(guī)定圖像的寬度和高度
context.drawImage(img,x,y,width,height);
參數(shù)說明：width 繪制圖片的寬度， height：繪制圖片的高度
如果指定寬高，最好成比例，不然圖片會(huì)被拉伸</em>
等比公式： toH = Height * toW / Width; //等比
設(shè)置高 = 原高度 * 設(shè)置寬/ 原寬度;
2.6.3 圖片裁剪，并在畫布上定位被剪切的部分
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
參數(shù)說明：
sx,sy 裁剪的左上角坐標(biāo)，
swidth：裁剪圖片的高度。 sheight:裁剪的高度
其他同上
2.6.4 用JavaScript創(chuàng)建img對(duì)象
第一種方式：
var img = document.getElementById("imgId");
第二種方式：
var img = new Image();//這個(gè)就是 img標(biāo)簽的dom對(duì)象
img.src = "imgs/arc.gif";
img.alt = "文本信息";
img.onload = function() {
//圖片加載完成后，執(zhí)行此方法
}
2.6.5 面向?qū)ο蠡A(chǔ)復(fù)習(xí)補(bǔ)充：
- 創(chuàng)建對(duì)象的方式：
* var o = { name: '123', age: 18 }; //json方式創(chuàng)建
* var o = new Object(); //通過new的方式創(chuàng)建
* var o = new Persion(); //通過類的構(gòu)造函數(shù)創(chuàng)建
- JS中對(duì)象的屬性創(chuàng)建方式
* json的方式： var o = { age: 19 };
* 直接添加屬性：var o = {}; o.age = 19;//太分散了，不利于管理
* 由于js動(dòng)態(tài)語言的特性，如果屬性不存在的時(shí)候，直接添加屬性。
* 構(gòu)造函數(shù)添加屬性
* 原型添加公共的屬性
- JS的構(gòu)造函數(shù)的原型
構(gòu)造函數(shù)的原型就是：構(gòu)造對(duì)象的模板，構(gòu)造函數(shù)原型里面的所有的屬性和方法都會(huì)共享給所有的 構(gòu)造函數(shù)構(gòu)造出來的所有實(shí)例。
Paste_Image.png
- 案例： 08繪制圖片.html
- 案例： 09繪制圖片裁剪.html
- 案例： 10序列幀動(dòng)畫.html
- 案例： 11面向?qū)ο蟀姹镜膭?dòng)畫幀.html 重點(diǎn)
2.6.6 補(bǔ)充 sublime制作代碼段（推薦--已結(jié)講過了）
第一步：sublime菜單欄→ 工具 → 制作代碼段
第二步：修改輸出的sublime代碼段文本
<snippet>
<content><![CDATA[
1、這里放要tab鍵 輸出的內(nèi)容
2、 ${1:this} 占位符，tab可以進(jìn)行切換，數(shù)字是切換的索引。
：后面的是默認(rèn)的文本。
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>簡(jiǎn)寫的字母</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
第三步：保存到插件的文件夾中，后綴名為：.sublime-snippet
比如我存放的位置：
C:\Users\malunmac\AppData\Roaming\Sublime Text 3\Packages\User\snippets
snippets是我自己新建的文件夾。
三、 canvas進(jìn)階
3.1 Canvas顏色樣式和陰影
3.1.1 設(shè)置填充和描邊的顏色（掌握）
- fillStyle : 設(shè)置或返回用于填充繪畫的顏色
- strokeStyle: 設(shè)置或返回用于筆觸的顏色
以上兩個(gè)值都可以接受顏色名,16進(jìn)制數(shù)據(jù)，rgb值，甚至rgba.
一般先進(jìn)行設(shè)置樣式然后進(jìn)行繪制。
例如：
ctx.strokeStyle = "red";
ctx.strokeStyle = "#ccc";
ctx.strokeStyle = "rgb(255,0,0)";
ctx.strokeStyle = "rgba(255,0,0,6)";
3.1.2 設(shè)置陰影（了解，少用，性能差）
- 類比于CSS3的陰影。
- shadowColor ： 設(shè)置或返回用于陰影的顏色
- shadowBlur ： 設(shè)置或返回用于陰影的模糊級(jí)別,大于1的正整數(shù)，數(shù)值越高，模糊程度越大
- shadowOffsetX： 設(shè)置或返回陰影距形狀的水平距離
- shadowOffsetY： 設(shè)置或返回陰影距形狀的垂直距離
ctx.fillStyle = "rgba(255,0,0, .9)"
ctx.shadowColor = "teal";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillRect(100, 100, 100, 100);
例如：
案例： 12設(shè)置box盒子陰影.html
設(shè)置png圖片的陰影，圖片透明部分不會(huì)被投影。
3.2 復(fù)雜樣式（了解）
3.2.1 創(chuàng)建線性漸變的樣式（了解）
- 一般不用，都是用圖片代替，canvas繪制圖片效率更高。
- 線性漸變可以用于 矩形、圓形、文字等顏色樣式
- 線性漸變是一個(gè)對(duì)象
- 語法：ctx.createLinearGradient(x0,y0,x1,y1); //參數(shù)：x0,y0起始坐標(biāo)，x1,y1結(jié)束坐標(biāo)
例如：
//創(chuàng)建線性漸變的對(duì)象，
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black"); //添加一個(gè)漸變顏色，第一個(gè)參數(shù)介于 0.0 與 1.0 之間的值，表示漸變中開始與結(jié)束之間的位置。
grd.addColorStop(1,"white"); //添加一個(gè)漸變顏色
ctx.fillStyle =grd; //關(guān)鍵點(diǎn)，把漸變?cè)O(shè)置到 填充的樣式
案例13設(shè)置線性漸變.html
3.2.2 設(shè)置圓形漸變（徑向漸變） 了解
- 創(chuàng)建放射狀/圓形漸變對(duì)象。可以填充文本、形狀等
- context.createRadialGradient(x0,y0,r0,x1,y1,r1);
- radial 半徑的；放射狀的；光線的；光線狀的 英 ['re?d??l] 美 ['red??l]
- 參數(shù)詳解：
- x0: 漸變的開始圓的 x 坐標(biāo)
- y0: 漸變的開始圓的 y 坐標(biāo)
- r0: 開始圓的半徑
- x1: 漸變的結(jié)束圓的 x 坐標(biāo)
- y1: 漸變的結(jié)束圓的 y 坐標(biāo)
- r1: 結(jié)束圓的半徑
var rlg = ctx.createRadialGradient(300,300,10,300,300,200);
rlg.addColorStop(0, 'teal'); //添加一個(gè)漸變顏色
rlg.addColorStop(.4, 'navy');
rlg.addColorStop(1, 'purple');
ctx.fillStyle = rlg;//設(shè)置 填充樣式為延續(xù)漸變的樣式
ctx.fillRect(100, 100, 500, 500);
- 案例14圓形漸變.html
3.2.3 繪制背景圖（了解）
- ctx.createPattern(img,repeat) 方法在指定的方向內(nèi)重復(fù)指定的元素了解
- pattern：n. 模式；圖案；樣品 英 ['p?t(?)n] 美 ['p?t?n]
- 第一參數(shù)：設(shè)置平鋪背景的圖片，第二個(gè)背景平鋪的方式。
- image ： 規(guī)定要使用的圖片、畫布或視頻元素。
- repeat ： 默認(rèn)。該模式在水平和垂直方向重復(fù)。
- repeat-x ： 該模式只在水平方向重復(fù)。
- repeat-y ： 該模式只在垂直方向重復(fù)。
- no-repeat： 該模式只顯示一次（不重復(fù)）。
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;// 把背景圖設(shè)置給填充的樣式
ctx.fill();
- 案例15背景圖填充.html
3.3 變換（重點(diǎn)）
3.3.1 縮放（重點(diǎn)）
- scale() 方法縮放當(dāng)前繪圖，更大或更小
- 語法：context.scale(scalewidth,scaleheight)
- scalewidth : 縮放當(dāng)前繪圖的寬度 (1=100%, 0.5=50%, 2=200%, 依次類推)
- scaleheight : 縮放當(dāng)前繪圖的高度 (1=100%, 0.5=50%, 2=200%, etc.)
+注意：縮放的是整個(gè)畫布，縮放后，繼續(xù)繪制的圖形會(huì)被放大或縮小。
- 案例16縮放案例.html
3.3.2 位移畫布（重點(diǎn)）
ctx.translate(x,y) 方法重新映射畫布上的 (0,0) 位置
-
參數(shù)說明：
- x： 添加到水平坐標(biāo)（x）上的值
- y： 添加到垂直坐標(biāo)（y）上的值
發(fā)生位移后，相當(dāng)于把畫布的0,0坐標(biāo) 更換到新的x,y的位置，所有繪制的新元素都被影響。
位移畫布一般配合縮放和旋轉(zhuǎn)等。
案例： 17位移畫布.html
3.3.3 旋轉(zhuǎn)（重點(diǎn)）
context.rotate(angle); 方法旋轉(zhuǎn)當(dāng)前的繪圖
注意參數(shù)是弧度（PI）
如需將角度轉(zhuǎn)換為弧度，請(qǐng)使用 degrees*Math.PI/180 公式進(jìn)行計(jì)算。
案例：18旋轉(zhuǎn)畫布.html
3.3 繪制環(huán)境保存和還原（重要）
- ctx.save() 保存當(dāng)前環(huán)境的狀態(tài)
- 可以把當(dāng)前繪制環(huán)境進(jìn)行保存到緩存中。
- ctx.restore() 返回之前保存過的路徑狀態(tài)和屬性
- 獲取最近緩存的ctx
- 一般配合位移畫布使用。
- 案例： 19矩形旋轉(zhuǎn)案例.html
3.4 設(shè)置繪制環(huán)境的透明度（了解）
- context.globalAlpha=number;
- number:透明值。必須介于 0.0（完全透明） 與 1.0（不透明） 之間。
- 設(shè)置透明度是全局的透明度的樣式。注意是全局的。
3.5 畫布限定區(qū)域繪制（了解）
- ctx.clip(); 方法從原始畫布中剪切任意形狀和尺寸
- 一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)（不能訪問畫布上的其他區(qū)域）
- 一般配合繪制環(huán)境的保存和還原。
3.6 畫布保存base64編碼內(nèi)容（重要）
- 把canvas繪制的內(nèi)容輸出成base64內(nèi)容。
- 語法：canvas.toDataURL(type, encoderOptions);
- 例如：canvas.toDataURL("image/jpg",1);
- 參數(shù)說明：
- type，設(shè)置輸出的類型，比如 image/png image/jpeg等
- encoderOptions： 0-1之間的數(shù)字，用于標(biāo)識(shí)輸出圖片的質(zhì)量，1表示無損壓縮，類型為： image/jpeg 或者image/webp才起作用。
案例1：
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
var img = document.querySelector("#img-demo");//拿到圖片的dom對(duì)象
img.src = canvas.toDataURL("image/png"); //將畫布的內(nèi)容給圖片標(biāo)簽顯示
3.7 畫布渲染畫布（重要）
- context.drawImage(img,x,y);
- img參數(shù)也可以是畫布，也就是把一個(gè)畫布整體的渲染到另外一個(gè)畫布上。
var canvas1 = document.querySelector('#cavsElem1');
var canvas2 = document.querySelector('#cavsElem2');
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
ctx1.fillRect(20, 20, 40, 40); //在第一個(gè)畫布上繪制矩形
ctx2.drawImage(canvas1, 10, 10); //將第一個(gè)畫布整體繪制到第二個(gè)畫布上
3.8 了解：線條樣式（了解）
- lineCap 設(shè)置或返回線條的結(jié)束端點(diǎn)(線頭、線冒)樣式
- butt ： 默認(rèn)。向線條的每個(gè)末端添加平直的邊緣。
- 翻譯.：屁股；煙頭；笑柄；靶垛；粗大的一端 英 [b?t] 美 [b?t]
- round ： 向線條的每個(gè)末端添加圓形線帽。
- square： 向線條的每個(gè)末端添加正方形線帽。
- butt ： 默認(rèn)。向線條的每個(gè)末端添加平直的邊緣。
Paste_Image.png
- lineJoin 設(shè)置或返回兩條線相交時(shí)，所創(chuàng)建的拐角類型
- bevel: 創(chuàng)建斜角。
- 翻譯. 斜角；斜面；[測(cè)] 斜角規(guī) 英 ['bev(?)l] 美 ['b?vl]
- round: 創(chuàng)建圓角。
- miter: 默認(rèn)。創(chuàng)建尖角
- bevel: 創(chuàng)建斜角。
Paste_Image.png
- lineWidth 設(shè)置或返回當(dāng)前的線條寬度
- miterLimit 設(shè)置或返回最大斜接長(zhǎng)度
- 意思: 斜接 英 ['ma?t?]
- 斜接長(zhǎng)度指的是在兩條線交匯處內(nèi)角和外角之間的距離。
- 一般用默認(rèn)值：10就可以了。除非需要特別長(zhǎng)的尖角時(shí)，使用此屬性。
Paste_Image.png
3.9 了解貝塞爾曲線（知道有）
3.9.1 繪制一條二次方曲線。
- 微軟的畫圖板中的曲線的顏色。
- quadratic：二次方的意思， 英 [kw?'dr?t?k] 美 [kwɑ'dr?t?k]
- Curve：曲線的意思， 英 [k??v] 美 [k?v]
- 語法： context.quadraticCurveTo(cpx,cpy,x,y);
- 參數(shù)：
- cpx： 貝塞爾控制點(diǎn)的 x 坐標(biāo)
- cpy： 貝塞爾控制點(diǎn)的 y 坐標(biāo)
- x ： 結(jié)束點(diǎn)的 x 坐標(biāo)
- y ： 結(jié)束點(diǎn)的 y 坐標(biāo)
Paste_Image.png
ctx.beginPath();
ctx.moveTo(20,20);
//繪制2次方曲線，貝賽爾曲線
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
3.9.2 繪制貝塞爾曲線（知道有）
- 繪制一條三次貝塞爾曲線
- 語法：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
- 提示：三次貝塞爾曲線需要三個(gè)點(diǎn)。前兩個(gè)點(diǎn)是用于三次貝塞爾計(jì)算中的控制點(diǎn)，第三個(gè)點(diǎn)是曲線的結(jié)束點(diǎn)。曲線的開始點(diǎn)是當(dāng)前路徑中最后一個(gè)點(diǎn)。如果路徑不存在，那么請(qǐng)使用 beginPath() 和 moveTo() 方法來定義開始點(diǎn)。
- 參數(shù)說明：
- cp1x： 第一個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
- cp1y： 第一個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
- cp2x： 第二個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
- cp2y： 第二個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
- x: 結(jié)束點(diǎn)的 x 坐標(biāo)
- y: 結(jié)束點(diǎn)的 y 坐標(biāo)
//繪制復(fù)雜的貝塞爾曲線
ctx.beginPath();
ctx.moveTo(400,400);
//參數(shù)說明：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
// cp1x： 第一個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
// cp1y： 第一個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
// cp2x： 第二個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
// cp2y： 第二個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
// x: 結(jié)束點(diǎn)的 x 坐標(biāo)
// y: 結(jié)束點(diǎn)的 y 坐標(biāo)
ctx.bezierCurveTo(500, 200, 600, 600, 700, 300);
ctx.stroke();
- 案例：25繪制貝塞爾曲線.html
Paste_Image.png
3.10了解創(chuàng)建兩條切線的弧（知道有）
- 在畫布上創(chuàng)建介于當(dāng)前起點(diǎn)和兩個(gè)點(diǎn)形成的夾角的切線之間的弧
- 語法： context.arcTo(x1,y1,x2,y2,r); //類比：css3中的圓角。
- 例如： ctx.arcTo(240, 100, 240, 110, 40);
- 參數(shù)：
- x1: 弧的端點(diǎn)1的 x 坐標(biāo)
- y1: 弧的端點(diǎn)1的 y 坐標(biāo)
- x2: 弧的端點(diǎn)2(終點(diǎn))的 x 坐標(biāo)
- y2: 弧的端點(diǎn)2(終點(diǎn))的 y 坐標(biāo)
- r : 弧的半徑
//代碼demo：
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
//context.arcTo(x1,y1,x2,y2,r); //類比：css3中的圓角。
ctx.arcTo(240, 100, 240, 110, 40);
ctx.lineTo(240, 300);
ctx.stroke();
Paste_Image.png
3.11了解判斷點(diǎn)是否在路徑中（知道有）
context.isPointInPath(x,y);
//isPointInPath() 方法返回 true，如果指定的點(diǎn)位于當(dāng)前路徑中；否則返回 false。
//判斷x,y坐標(biāo)的點(diǎn)是否在當(dāng)前的路徑中。
3.12了解文本寬度計(jì)算（知道有）
context.measureText(text).width;
3.13 如果以后做canvas游戲方向開發(fā)深入學(xué)習(xí)可以擴(kuò)展內(nèi)以下容：
- setTransform() 將當(dāng)前轉(zhuǎn)換重置為單位矩陣。然后運(yùn)行 transform()
- transform() 替換繪圖的當(dāng)前轉(zhuǎn)換矩陣
- globalCompositeOperation 設(shè)置或返回新圖像如何繪制到已有的圖像上
- 像素操作
四、 Canvas開發(fā)庫(kù)封裝
4.1封裝常用的繪制函數(shù)
4.1.1封裝一個(gè)矩形
//思考：我們用到的矩形需要哪些繪制的東西呢？
1、矩形的 x、y坐標(biāo)
2、矩形的寬高
3、矩形的邊框的線條樣式、線條寬度
4、矩形填充的樣式
5、矩形的旋轉(zhuǎn)角度
6、矩形的縮小放大
//下面是把上面所有的功能進(jìn)行封裝的代碼：
function ItcastRect( option ) {//矩形構(gòu)造函數(shù)
this._init(option);
}
ItcastRect.prototype = { //矩形的原型對(duì)象
_init: function( option ) { //初始化方法
option = option || {};
this.x = option.x === 0 ? 0 : option.x || 100;
this.y = option.y === 0 ? 0 : option.y || 100;
this.w = option.w || 100;
this.h = option.h || 100;
this.angle = option.angle === 0 ? 0 : option.angle || 0;
this.fillStyle = option.fillStyle || 'silver';
this.strokeStyle = option.strokeStyle || 'red';
this.strokeWidth = option.strokeWidth || 4;
this.scaleX = option.scaleX || 1;
this.scaleY = option.Y || 1;
},
render: function( ctx ) {//把矩形渲染到canvas中
ctx.save();
ctx.translate( this.x, this.y );//位移畫布
ctx.rotate( this.angle * Math.PI / 180 );//旋轉(zhuǎn)角度
ctx.scale( this.scaleX, this.scaleY );//縮放
ctx.fillStyle = this.fillStyle;
ctx.fillRect( 0, 0, this.w, this.h ); //填充矩形
ctx.lineWidth = this.strokeWidth; //線寬
ctx.strokeStyle = this.strokeStyle; //填充樣式
ctx.strokeRect( 0,0,this.w,this.h ); //描邊樣式
ctx.restore();
},
constructor: ItcastRect
};
- 4.1.2作業(yè)：嘗試著封裝一個(gè)圓形？
//封裝圓形的代碼的答案：不要偷看
function ItcastCircle( option ) {
this._init( option );
}
ItcastCircle.prototype = {
_init: function( option ) {
option = option || {};
this.x = option.x === 0 ? 0 : option.x || 100;
this.y = option.y === 0 ? 0 : option.y || 100;
this.w = option.w || 100;
this.h = option.h || 100;
this.angle = option.angle === 0 ? 0 : option.angle || 0;
this.fillStyle = option.fillStyle || 'silver';
this.strokeStyle = option.strokeStyle || 'red';
this.strokeWidth = option.strokeWidth || 4;
this.scaleX = option.scaleX || 1;
this.scaleY = option.Y || 1;
this.opactity = option.opactity || 1;
this.counterclockwise =
option.counterclockwise === true ? true : option.counterclockwise || false;
this.startAngle = option.startAngle == 0 ? 0 : option.startAngle || 0;
this.endAngle = option.endAngle == 0 ? 0 : option.endAngle || 0;
this.startAngle = this.startAngle * Math.PI/180;
this.endAngle = this.endAngle * Math.PI / 180;
this.r = option.r || 100;
},
render: function( ctx ) {
ctx.save();
ctx.translate( this.x, this.y);
ctx.scale( this.scaleX, this.scaleY );
ctx.rotate( this.agnle * Math.PI / 180 );
ctx.globalAlpha = this.opacity;
ctx.fillStyle = this.fillStyle;
ctx.strokeStyle = this.strokeStyle;
ctx.moveTo(0, 0);
ctx.arc( 0, 0, this.r, this.startAngle, this.endAngle, this.counterclockwise);
ctx.fill();
ctx.stroke();
ctx.restore();
},
constructor: ItcastCircle
};
4.2 第三方庫(kù)使用
- Rgraph vs 百度的echart
https://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph/
- 國(guó)產(chǎn)的egret引擎
http://www.egret-labs.org/
- 比較火的3d引擎：treejs
http://threejs.org/
- Konva
官網(wǎng)：http://konvajs.github.io/
特點(diǎn)：
* 小巧、使用方便、適合移動(dòng)端和pc端
* 支持豐富的事件處理操作
* 支持類似JQuery的操作方式（順帶能復(fù)習(xí)jQueyr）
* 開源，可以隨意更改
* 社區(qū)更新比較活躍，github托管源碼
* 性能也不錯(cuò)
- 其他的還有很多，希望以后能用到你們的庫(kù)。
五、Konva的使用快速上手
5.1 Konva的整體理念
- 舞臺(tái)的概念的引入。整個(gè)視圖看做是一個(gè)舞臺(tái) stage
- 舞臺(tái)中可以繪制很多個(gè)層 layer
- layer下面可以有很多的group
- group下面可以有 矩形、圖片、其他形狀等
- 參看：快速上手文檔---查看翻譯文檔
Stage
|
+------+------+
| |
Layer Layer
| |
+-----+-----+ Shape
| |
Group Group
| |
+ +---+---+
| | |
Shape Group Shape
|
+
|
Shape
5.2 Konva矩形案例
5.2.1 創(chuàng)建一個(gè)矩形： Konva.Rect(option);
//Konva使用的基本案例
//第一步：創(chuàng)建舞臺(tái)
var stage = new Konva.Stage({
container: 'container', //需要存放舞臺(tái)的Dom容器
width: window.innerWidth, //設(shè)置全屏
height: window.innerHeight
});
//第二步：創(chuàng)建層
var layer = new Konva.Layer(); //創(chuàng)建一個(gè)層
stage.add(layer); //把層添加到舞臺(tái)
//第三步： 創(chuàng)建矩形
var rect = new Konva.Rect({ //創(chuàng)建一個(gè)矩形
x: 100, //矩形的x坐標(biāo)，相對(duì)其父容器的坐標(biāo)
y: 100,
width: 100, //矩形的寬度
height: 100, //矩形高度
fill: 'gold', //矩形填充的顏色
stroke: 'navy', //矩形描邊的顏色
strokeWidth: 4, //填充寬度
opactity: .2, //矩形的透明度
scale: 1.2, //矩形的縮放 1：原來大小
rotation: 30, //旋轉(zhuǎn)的角度，是deg不是弧度。
cornerRadius: 10, //圓角的大小（像素）
id: 'rect1', //id屬性，類似dom的id屬性
name: 'rect',
draggable: true //是否可以進(jìn)行拖拽
});
//創(chuàng)建一個(gè)組
var group = new Konva.Group({
x: 40,
y: 40,
});
group.add( rect ); //把矩形添加到組中
//第四步： 把形狀放到層中
layer.add( group ); //把組添加到層中
layer.draw(); //繪制層到舞臺(tái)上
5.3 Konva的動(dòng)畫系統(tǒng)
5.3.1 tween對(duì)象(重點(diǎn))
- tween，英文意思：兩者之間， 英 [twi?n] 美 [twin]
- tween是控制Konva對(duì)象進(jìn)行動(dòng)畫的核心對(duì)象。
- tween可以控制所有數(shù)字類型的屬性進(jìn)行動(dòng)畫處理，比如：x, y, rotation,
width, height, radius, strokeWidth, opacity, scaleX等
//案例：
var tween = new Konva.Tween({
node: rect, //要進(jìn)行動(dòng)畫的Konva對(duì)象
x: 300, //要進(jìn)行動(dòng)畫的屬性
opacity: .8,
duration: 1, //持續(xù)時(shí)間
easing: Konva.Easings.EaseIn, //動(dòng)畫的動(dòng)畫效果
yoyo: true, //是否進(jìn)行循環(huán)播放的設(shè)置
onFinish: function() {
//動(dòng)畫執(zhí)行結(jié)束后，執(zhí)行此方法
}
});
tween.play(); //啟動(dòng)動(dòng)畫
-
tween的控制方法
- tween.play(), //播放動(dòng)畫
- tween.pause(), //暫停動(dòng)畫
- tween.reverse(), //動(dòng)畫逆播放
- tween.reset(), //重置動(dòng)畫
- tween.finish(), //立即結(jié)束動(dòng)畫
- seek：英文：尋找 英 [si?k] 美 [sik]
-
tween的緩動(dòng)控制選項(xiàng)
- Konva.Easings.Linear //線性
- Konva.Easings.EaseIn //緩動(dòng)，先慢后快
- Konva.Easings.EaseOut //先快后慢
- Konva.Easings.EaseInOut //兩頭慢，中間快
- Konva.Easings.BackEaseIn //往回來一點(diǎn)，然后往前沖，汽車啟動(dòng)類似...
- Konva.Easings.BackEaseOut
- Konva.Easings.BackEaseInOut
- Konva.Easings.ElasticEaseIn //橡皮筋 英 [?'l?st?k] 美 [?'l?st?k]
- Konva.Easings.ElasticEaseOut
- Konva.Easings.ElasticEaseInOut
- Konva.Easings.BounceEaseIn //彈跳；彈起，反跳；彈回 英 [ba?ns] 美 [ba?ns]
- Konva.Easings.BounceEaseOut
- Konva.Easings.BounceEaseInOut
- Konva.Easings.StrongEaseIn //強(qiáng)力
- Konva.Easings.StrongEaseOut
- Konva.Easings.StrongEaseInOut
動(dòng)畫效果參考： 29Konva動(dòng)畫緩動(dòng)效果案例.html
5.3.2 動(dòng)畫to的使用
- to就是對(duì)tween的封裝，比較簡(jiǎn)單好用。
//案例：
var rect = new Konva.Rect({
x: 10,
y: 10,
width: 100,
height: 100,
fill: 'red'
});
layer.add(rect);
layer.draw();
//動(dòng)畫系統(tǒng)
rect.to({
x: 100,
y: 100,
opactity: .1,
duration: 3,
onFinish: function() {
}
});
//to: 就是對(duì)tween的簡(jiǎn)單應(yīng)用。
5.3.3 Animate的應(yīng)用
- Animation動(dòng)畫，實(shí)際上就是瀏覽器通知開發(fā)者進(jìn)行繪制，并提供當(dāng)前的時(shí)間
var anim = new Konva.Animation(function(frame) {
//動(dòng)畫系統(tǒng)提供的frame有三個(gè)屬性可以使用：
var time = frame.time, // 動(dòng)畫執(zhí)行的總時(shí)間
timeDiff = frame.timeDiff, // 距離上一幀的時(shí)間
frameRate = frame.frameRate; // 幀率（既1000/間隔時(shí)間）
//動(dòng)畫的動(dòng)作
}, layer);
anim.start();//啟動(dòng)動(dòng)畫
//anim.stop();//結(jié)束動(dòng)畫
5.3.4 循環(huán)播放動(dòng)畫的實(shí)現(xiàn)
//總體思路，使用tween 配合onFinish事件中重新播放動(dòng)畫，達(dá)到循環(huán)播放的效果
var loopTween = new Konva.Tween({
node: star, //設(shè)置要表現(xiàn)動(dòng)畫的 Konva對(duì)象
rotation: 360, //旋轉(zhuǎn)360度
duration: 2, //動(dòng)畫持續(xù)時(shí)間
easing: Konva.Easings.Linear,
onFinish: function() {
// this === loopTween //true
this.reset();//重置動(dòng)畫
this.play(); //重新播放動(dòng)畫
}
});
loopTween.play();
5.3.5 回放且循環(huán)播放動(dòng)畫
- yoyo屬性可以進(jìn)行對(duì)動(dòng)畫進(jìn)行播放完后，回放當(dāng)前動(dòng)畫，并持續(xù)循環(huán)來回切換播放。
rect.to({
duration: 2,
scale: 1.5,
yoyo: true// 此設(shè)置也可以用于 tween
});
5.3.6 進(jìn)度條案例
5.3.7 傳智官網(wǎng)案例
- 三角函數(shù)的補(bǔ)充
- Math.sin(弧度); //夾角對(duì)面的邊 和 斜邊的比值
- Math.cos(弧度); //夾角側(cè)邊 與斜邊的比值
- 圓形上面的點(diǎn)的坐標(biāo)的計(jì)算公式
- x =x0 + Math.cos(rad) * R;//x0和y0是圓心點(diǎn)坐標(biāo)
- y =y0 + Math.sin(rad) * R;//注意都是弧度
Paste_Image.png
- group的靈活運(yùn)用
- konva的group很靈活，每個(gè)group都有自己的坐標(biāo)系
- group可以包含其他的group，可以對(duì)group做整個(gè)組的動(dòng)畫
- group可以通過getChidren();//可以拿到直接子級(jí)元素。
var group = new Konva.Group({
x: 0,
y: 0
});
group.add(rect);
5.4 Konva的事件（重要）
var rect = new Konva.Rect({
x: 100,
y: 100,
fill: 'red',
width: 200,
height: 200
});
//綁定事件 Konva支持事件：mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, mousewheel, click, dblclick, dragstart, dragmove, and dragend
rect.on('click', function(){ //jQuery一模一樣！！
console.log('^_^ ^_^');
});
//綁定多個(gè)事件
rect.on('click mousemove',function(e){
});
//解除綁定事件
rect.off('click'); //這不是jQuery嗎？
//觸發(fā)事件
rect.fire('click');
//取消事件冒泡
rect.on('click', function(evt) {
alert('You clicked the circle!');
evt.cancelBubble = true; //取消事件冒泡
});
5.5 Konva的選擇器
- 選擇方法。
- ID選擇法：stage.find('#id'); //此方法返回的是一個(gè)數(shù)組
- name選擇法：group.findOne('.name');//返回一個(gè)Konva對(duì)象
- type選擇法： group.find('Circle');//查找所有的圓形Konva對(duì)象
//組中查找圓形的Konva對(duì)象
groupCircle.find('Circle').each(function( circle, index ){
circle.setZIndex( 3 - index );
});
5.6 餅狀圖案例
- wedge: 楔形
5.7 柱狀圖案例
- histogram n. [統(tǒng)計(jì)] 直方圖；柱狀圖 英 ['h?st?gr?m] 美 ['h?st?ɡr?m]
六、Canvas項(xiàng)目實(shí)戰(zhàn)
七、Canvas優(yōu)化
<!-- requestAnim shim layer by Paul Irish -->
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/
var canvas, context, toggle;
init();
animate();
function init() {
canvas = document.createElement( 'canvas' );
canvas.width = 512;
canvas.height = 512;
context = canvas.getContext( '2d' );
document.body.appendChild( canvas );
}
function animate() {
requestAnimFrame( animate );
draw();
}
function draw() {
var time = new Date().getTime() * 0.002;
var x = Math.sin( time ) * 192 + 256;
var y = Math.cos( time * 0.9 ) * 192 + 256;
toggle = !toggle;
context.fillStyle = toggle ? 'rgb(200,200,20)' : 'rgb(20,20,200)';
context.beginPath();
context.arc( x, y, 10, 0, Math.PI * 2, true );
context.closePath();
context.fill();
}
