讀書筆記 - js進階程式設計 - 第十五章 使用Canvas繪圖

標籤：筆記   tip   結合   選擇   曲線   nal   port   body   style   

讀書筆記 - js進階程式設計 - 第十三章 事件 

canvas	具備繪圖能力的2D上下文 及文本API很多瀏覽器對WebGL的3D上下文支援還不夠好 有時候即使瀏覽器支援，作業系統如果缺缺乏必要的繪圖驅動程式，則瀏覽器即使支援了也沒用
	<canvas>var drawing = document.getElementById("drawing");if( drawing.getContext ){    drawing.getContext("2d");}
toDataURL	可以匯出在canvas元素上繪製的映像var src = drawing.toDataURL("image/png");注意toDataURL是canvas對象的方法，不是內容物件的方法
填充色 描邊色	var context = drawing.getContext("2d")context.strokeStyle = "red;context.fillStyle = "#0000ff";
繪製矩形	fillRect( x,y,width,height);strokeRect( x,y,width,height);clearRect( x,y,width,height);lineWidthlineGap butt round squarelineJoin round bevel miter
繪製路徑	beginPath() arc() 畫弧線arcTo 從上一點開始繪製一條弧線bezierCurveTo 穿過一個點 ，把兩個點用弧線連起來lineTo(x,y) 繪製直線moveTo() 移動 不繪線quadraticCurveTo( cx,cy,x,y ) 從上一點開發繪製一條二次曲線，到x,y為止，並且以cx cy為控制點rect() 繪製一條矩形線路 closePathfillStyle fill()stokeStyle stoke()clip()
isPointInPath	確定畫面上的某一點是否位於路徑上
繪製文本	fillText( str,x ,y ,最大像素寬度 )strokeText( str, x, y, 最大像素寬度 )
	font "px Arial"textAlign  start end left right center textBaseline top hanging middle alphabetic ideographic bottom
measureText()	var fontSize = 100 context.font = fontSize + "px Arial";while( context.measureText("Hello world?").width > 140 ){   fontSize -- ;   context.font = fontSize + "px Arial" ;}context.fillText( "hello world!", 10, 10 ) ;context.fillText("font size is" + fontSize + "px", 10, 50 ) ;
繪製變換	rotate( angle );scale( scaleX, saleY ) 縮放映像 translate( x, y ) 更改原點transform() 修改變換矩陣setTransform() 先變換矩陣重設為預設狀態，然後再調用 transform()
繪製變化和恢複	save restore
繪製映像	var image = document.images[0] ;context.drawImage( image, x, y, width, height ) ;還可以context.drawImage( image, orginalX, originalY, originalWidth, originalHeight, x, y, width, height ) ;image這個參數也可以傳其它canvas
陰影	只在在繪製前為它們設定適當的值，就能自動產生陰影var context = drawing.getContext("2d");context.shadowOffsetX = 5 ;context.shadowOffsetY = 5 ;context.shadowBlur = 4 ;context.shadowColor = "rgba(0,0,0,0.5 ) ;
漸層	由CanvasGradient執行個體來示範var gradient = context.createLinearGradient( 30, 30, 70, 70 );gradient.addColorStop( 0, "white" ) ;gradient.addColorStop( 1, "black" ) ;context.fillStyle = gradient ;context.fillRect( 30, 30, 50, 50 ) ;注意要確保座標匹配
	createRadialGradient()方法 放射漸層
模式	就是重複的映像pattern = context.createPattern( image, "repeat");context.fillStyle = pattern ;context.fillRect ( 10, 10, 150, 150 ) ;注意 模式與漸層一樣，都是從原點開始的，並不是要從某個位置開始繪製重複的映像.createPattern的第一個元素，也可以是video元素 或另一個canvas元素
使用映像資料	var imageData = context.getImageData( 10, 5, 50, 50 ) ;這裡返回的對象是ImageData的執行個體，每個執行個體對象有三個屬性 width height datadata屬性是一個數組，儲存著映像中每一個像素的資料.可以修改它，然後回寫映像資料imageData.data = data ;context.putImageData( imageData, 0, 0 ) ; 用上述方法可以實現灰階過濾器
合成	globalAlpha 全域透明度globalCompositionOperation表示後繪製的圖形怎樣與先繪製的圖形結合 這個屬性的值是字串，可能的值如下source-over 預設值:source-out source-atop destination-over destination-indestination-outdestination-atoplightercopyxor
WebGL	針對Canvas的3D 上下文www.learningwebgl.com 有非常棒的教程
	類型化數組  typed arrays ，類型化數組也是數組.ArrayBuffer的類型var buffer = new ArrayBuffer( 20 ) ;// 分配20Bvar num = buffer.byteLenght // 10 ; var view = new DataView( buffer, 可選的位元組位移量，可選的要選擇的位元組數);
類型化視圖	繼承自DataView
WebGL上下文	var drawing = document.getElementById("drawing");var param = {};param.alpha = tue ;param.depth = true 16位param.stencil = // 可能使用8位樣板緩衝區 預設值是falseparam.antialias //表示將使用預設機制執行消除鋸齒操作。預設值是trueparam.premultipliedAlpha //值為true, 表示組圖緩衝區有預乘Alphparam.preserveDrawingBuffer //值為true, 表示在組圖完成後保留繪圖緩衝區if( drawing.getContext ){  var gl = drawing.getContext("experimental-webgl");  if( gl ){      //使用WebGL    }}
WebGL常量	gl.COLOR_BUFFER_BIT
方法命名	類似gl.uniform4f() 接收4個浮點數gl.uniform3i() 接收3個整數gl.uniform3iv()  接收包含3個整數的數組
準備繪圖	gl.clearColor(0,0,0,1);gl.clear( gl.COLOR_BUFFER_BIT ) ;先清理緩衝區，然後再執行其它繪圖操作
視口與座標	gl.viewport( x, y, width, height );座標原點在左下角
	在視口內部 座標原點是視口的中心
緩衝區	gl.createBuffer();bindBufferbufferDatagl.getError()
著色器	shader 頂點著色器 和 片段著色器
編寫著色器
編寫著色器程式
為著色器傳入值
繪圖	只能繪製點 線 三角
紋理	gl.createTexture() 然後再將一幅映像綁定到該紋理
讀取像素	readPixels()像素資訊是從框架緩衝區讀取的
支援	Firefox4+ chrome Safari 5.1 都實現了WebGL API但Safari裡預設是禁用的 在使用WebGL之前，最好檢測其是否得到了機算機驅動的支援，而不只是檢測監測特定的瀏覽器版本。 WebGL是一個正在制定的發展中的規範，函數名 簽名 資料類型 都有可能改變可以說 WebGL目前只適合實驗性地學習，不適合真正開發和應用.d

  

讀書筆記 - js進階程式設計 - 第十五章 使用Canvas繪圖