2013年12月1日 星期日
Canvas 圓點馬賽克
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>pixelation2</title>
<meta name="description" content="" />
<meta name="author" content="hua" />
</head>
<body style="background: black">
<canvas id="myCanvas">不支援Canvas。</canvas>
</body>
</html>
<script type="text/javascript">
(function(){
var canvas,context,img = new Image(),imgDatas=[],frame=0;
var init = function(){
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
img.addEventListener('load' ,loadHandler , false);
img.src = "images/dali.jpg";
};
var loadHandler = function(e){
//console.log(canvas);
canvas.width = img.width;
canvas.height = img.height;
//context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
context.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imageData.data;
context.clearRect(0, 0, canvas.width, canvas.height);
var numTileRows = 20;
var numTileCols = 20;
var tileWidth = imageData.width/numTileCols;
var tileHeight = imageData.height/numTileRows;
for (var r = 0; r < numTileRows; r++) {
for (var c = 0; c < numTileCols; c++) {
var x = (c*tileWidth)+(tileWidth/2);
var y = (r*tileHeight)+(tileHeight/2);
var pos = (Math.floor(y)*(imageData.width*4))+(Math.floor(x)*4);
var red = pixels[pos];
var green = pixels[pos+1];
var blue = pixels[pos+2];
context.fillStyle = "rgb("+red+", "+green+", "+blue+")";
//繪製方式換成圓
context.beginPath();
context.arc(x, y, tileWidth/2, 0, Math.PI*2, false);
context.closePath();
context.fill();
};
};
};
init();
}());
</script>
HTML5 Canvas 馬賽克
<canvas id="myCanvas201312010546">不支援Canvas。</canvas>
</html>
<script type="text/javascript">
(function(){
var canvas,context,img = new Image(),imgDatas=[],frame=0;
var init = function(){
canvas = document.getElementById('myCanvas201312010546');
context = canvas.getContext('2d');
img.addEventListener('load' ,loadHandler , false);
//img.src = "images/dali.jpg";
img.src = '你圖片的所在路徑';
};
var loadHandler = function(e){
//console.log(canvas);
canvas.width = img.width;
canvas.height = img.height;
//context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
context.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imageData.data;
context.clearRect(0, 0, canvas.width, canvas.height);
//馬賽克磚塊數量
var numTileRows = 30;
var numTileCols = 30;
//每一塊馬賽克磚的長寬
var tileWidth = imageData.width/numTileCols;
var tileHeight = imageData.height/numTileRows;
//馬賽克主要演算邏輯
for (var r = 0; r < numTileRows; r++) {
for (var c = 0; c < numTileCols; c++) {
//顏色取樣點,該取樣點的周圍九宮格,將會與此點設成同色
var x = (c*tileWidth)+(tileWidth/2);
var y = (r*tileHeight)+(tileHeight/2);
var pos = (Math.floor(y)*(imageData.width*4))+(Math.floor(x)*4);
//取得顏色
var red = pixels[pos];
var green = pixels[pos+1];
var blue = pixels[pos+2];
//重新填滿色塊
context.fillStyle = "rgb("+red+", "+green+", "+blue+")";
context.fillRect(x-(tileWidth/2), y-(tileHeight/2), tileWidth, tileHeight);
};
};
};
init();
}());
</script>
HTML5 Canvas Shadow
<canvas style="background-color:#000000" id="myCanvas201312010535" width="400" height="300">不支援Canvas。</canvas>
<script type="text/javascript">
(function(){
var canvas,context,img;
var init = function(){
canvas = document.getElementById('myCanvas201312010535');
context = canvas.getContext('2d');
};
var drawShadow = function(e){
context.shadowBlur = 50; //光暈，模糊
context.shadowColor = "rgba(255, 255, 255 ,1)"; //也可以使用rag(r,g,b) or 直接給色碼
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,false);
context.closePath();
context.fillStyle = "rgba(88,178,220,0.5)";
context.fill();
context.shadowBlur = 60; //光暈，模糊
context.shadowColor = "rgba(225, 225, 225 ,1)"; //也可以使用rag(r,g,b) or 直接給色碼
context.shadowOffsetX = 10;
context.shadowOffsetY = -5;
context.beginPath();
context.arc(250,100,50,0,Math.PI*2,false);
context.closePath();
context.fillStyle = "rgba(251,226,81,0.6)";
context.fill();
};
init();
drawShadow();
}());
</script>
Canvas 負片
img
canvas
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>canvas_filter2</title>
<meta name="description" content="" />
<meta name="author" content="hua" />
</head>
<body>
img<img id="myImg">
canvas<canvas id="myCanvas" width="200" height="200">
不支援Canvas。
</canvas>
</body>
</html>
<script type="text/javascript">
(function(){
var canvas,context,img;
var init = function(){
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
img = document.getElementById('myImg');
img.addEventListener('load' ,loadHandler , false);
img.src = "images/lena.png";
};
var loadHandler = function(e){
context.drawImage(img , 0, 0);
var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
var data = imgData.data;
var dataSize = data.length;
//主要公式
for (var i = 0; i < dataSize ; i=i+4) {
data[i] = 255 - data[i]; //R
data[i + 1] = 255 - data[i + 1]; //G
data[i + 2] = 255 - data[i + 2]; //B
}
context.putImageData(imgData, 0, 0);
};
init();
}());
</script>