JavaScript進階程式設計:Canvas繪圖

標籤：

Canvas 繪製矩形

var drawing = document.getElementById(‘drawing‘);if( drawing.getContext ){var context = drawing.getContext(‘2d‘);// 繪製矩形context.fillStyle = ‘#0000ff‘;context.fillRect( 10, 10 , 50 , 50 );// 繪製半透明紅色矩形context.fillStyle = ‘rgba(255,0,0,0.5)‘;context.fillRect( 30, 30, 50, 50);// 繪製描邊矩形context.lineWidth = 1;context.strokeStyle = ‘#000000‘;context.strokeRect( 50 , 50, 50, 50 );// 清除一個小矩形context.clearRect( 40,40,10,10 );}

Canvas 繪製路徑

var drawing = document.getElementById(‘drawing‘);if( drawing.getContext ){var context = drawing.getContext(‘2d‘);// 開始路徑context.beginPath();// 繪製外圓context.arc( 100 , 100 , 99 , 0 , 2 * Math.PI , false );// 繪製內圓context.moveTo(194,100);context.arc( 100 , 100 , 94 , 0 , 2 * Math.PI , false );// 變換座標原點//context.translate(100,100);// 旋轉原點//context.rotate(1);// 繪製分針context.moveTo(100,100);context.lineTo(100,15);// 繪製時針context.moveTo(100,100);context.lineTo(35,100);//context.stroke();// 繪製文本context.font = "bold 14px ‘Arial‘";context.textAlign = "center";context.textBaseline = "middle";context.fillText("12",100,20);}

Canvas 使用映像資料

window.onload = function(){var drawing = document.getElementById(‘drawing‘);if( drawing.getContext ){var context = drawing.getContext("2d"),image = document.getElementById(‘tulip‘),imageData , data,i, len, average,red, green, blue, alpha;// 繪製原始映像context.drawImage( image , 10 , 10 );// 獲得映像資料imageData = context.getImageData(0,0,image.width,image.height);data = imageData.data;for( i=0, len=data.length; i<len; i+=4 ){red = data[i];green = data[i+1];blue = data[i+2];alpha = data[i+3];// 獲得 rgb 平均值average = Math.floor( (red+green+blue) / 3 );// 配置顏色值, 透明度不變data[i] = average;data[i+1] = average;data[i+2] = average;}// 回寫映像資料imageData.data = data;context.putImageData( imageData , 400 , 400 );}}

JavaScript進階程式設計:Canvas繪圖