canvas-第1天基礎和面向?qū)ο箐亯|-

Canvas2d簡介Canvas的背景2Canvas可以用JavaScript在上面是HTML5提供的一種元素：<canvas></canvas>Canvas是一個矩形區(qū)域，繪畫，控制其每一個像素。canvas元素使用JavaScript在網(wǎng)頁上繪制圖像，本身不具備繪圖功能。canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。3Canvas的應用領域?可視化數(shù)據(jù)、數(shù)據(jù)圖表banner模擬器

計算機控制圖形編輯器多用于活動頁面、特效完整的canvas移動化應用MAKE

IT

BETTER4Canvas的兼容性?版桌面瀏覽器，如chrome，firefox，opera和safari等，都是支持的。IE9及IE9以上的瀏覽器支持。的HTML代碼會端大部分瀏覽器支持。如果不支持canvas，canvas被渲染。如：<canvas>你好，您的瀏覽器不支持Canvas。56Canvas的寬高屬性Canvas用width和height屬性指定畫布內(nèi)容的寬高–

單位只能是像素。其他單位值都會被忽略。CSS的width和height可以改變Canvas元素的寬高，但是其內(nèi)容會被等比例拉伸。比如說，100x100的canvas如果設置了100x200的CSS寬高，那么其內(nèi)容就會被拉伸。Canvas的width和height被變更時，Canvas上已有的任何繪圖都會被清除。Context對象Context：Canvas的上下文、繪制環(huán)境。–

上下文：上知天文，下知地理。是所有的操作的

或者集合。Canvas自身無法繪制任何內(nèi)容。Canvas的繪圖是使用JavaScript操作的。Context對象就是JavaScript操作Canvas的接口。使用[CanvasElement].getContext(‘2d’)來獲取2D繪圖上下文。canvas還支持WebGL的3D模式（ie11+）。78Canvas繪制路徑Canvas的坐標系Canvas的坐標系以Canvas的左上角為(0,0)點。X軸以往右的方向為正方向，Y軸以往下的方向為正方向。(0,0)9xy10Canvas畫線Context對象的“當前位置”?？梢酝ㄟ^moveTo變更當前位置。可以用lineTo在當前位置和目標點之間連線。Stroke是什么？如何畫出一根細線？（0.5法）路徑的概念繪制時， 會先繪制出一個虛擬的路徑。然后根據(jù)這個路徑進行描邊（stroke）或者填充（fill）。closePath可以將路徑封閉起來，將起始點和終點相連接。beginPath會開啟一個新的路徑。clip可以剪切畫板。（需要配合save,restore）路徑填充時符合“非零環(huán)繞原則”1112矩形的繪制rect(x,y,width,height)函數(shù)繪制矩形路徑。fillRect(x,y,weith,height)填充矩形。strokeRect(x,y,weith,height)描邊矩形。clearRect(x,y,weith,height)清空矩形。13弧形的繪制/arccontext.arc(x,y,r,sAngle,eAngle,counterclockwise);參數(shù)xyrsAngleeAngleCounterclockwise描述圓的中心的x坐標。圓的中心的y坐標。圓的半徑。起始角，以弧度計。。結(jié)束角，以弧度計。

可選。14弧形的繪制/arcTocontext.fillRect(x1,y1,x2,y2,r);創(chuàng)建兩條切線之間的弧。選擇起點、終點和半徑繪制一個弧線。兩條切線確定一個圓，這個函數(shù)繪制的，就是圓與兩個切點之間的弧線。曲線的繪制二次方三次方曲線曲線

/jay-

dong/archive/2012/09/26/2704188.html15漸變色crea inearGradient(x1,y1,x2,y2)得到漸變。addColorStop(0,“black”)加入關(guān)鍵點。canvas區(qū)域內(nèi)，全部都受到影響。1617線條與折線的設定線寬lineWidth線帽lineCap，指線段開始結(jié)束點的形狀。butt（默認），round（圓形），square（方形）連接點lineJoin，指折線的轉(zhuǎn)折點的繪制方法，，round（圓形），bevel（默認），miter（尖角）miterLimit，斜接線長度與二分之一線寬的比值，如果超過了改值，連接點會用bevel方式繪制。坐標變換/旋轉(zhuǎn)，縮放，平移rotate，旋轉(zhuǎn)scale，縮放translate，坐標系重新。（畫布平移）1819文本的繪制設置字體、對齊、基線fillT