[問題] 詢問HTML CANVAS的語法
var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
ctx.drawImage(img, 0, 0, c.width, c.height);
var imgData = ctx.getImageData(0, 0, c.width, c.height);
//alert(img.width);
//alert(img.height);
//alert(c.width);
//alert(c.height);
//alert(img.width*img.height*4);
//alert(imgData.data.length);
// invert colors
var i;
for (j = 0; j < img.height; j += 1) {
var m_i = 0;
for (i = 0; i < img.width; i += 1) {
if (((imgData.data[(j * img.width + i) * 4]
+ imgData.data[(j * img.width + i) * 4 + 1] + imgData.data[(j
* img.width + i) * 4 + 2]) / 3) > 20) {
imgData.data[(j * img.width + i) * 4] = 255;
imgData.data[(j * img.width + i) * 4 + 1] = 255;
imgData.data[(j * img.width + i) * 4 + 2] = 255;
} else {
imgData.data[(j * img.width + i) * 4] = 0;
imgData.data[(j * img.width + i) * 4 + 1] = 0;
imgData.data[(j * img.width + i) * 4 + 2] = 0;
m_i = m_i + 1;
}
imgData.data[(j * img.width + i) * 4 + 3] = 255;
}
//alert(m_i);
if (m_i < 60) {
j = j - 1;
for (i = 0; i < img.width; i += 1) {
imgData.data[(j * img.width + i) * 4] = 255;
imgData.data[(j * img.width + i) * 4 + 1] = 0;
imgData.data[(j * img.width + i) * 4 + 2] = 0;
imgData.data[(j * img.width + i) * 4 + 3] = 255;
}
j = j + 1;
}
}
ctx.putImageData(imgData, 0, 0);
這串程式碼他會顯示如圖一的圖
圖一：http://imgur.com/6Bfj5QB
請問該如何修改程式碼使他顯示如圖二這樣的圖
圖二：http://imgur.com/syFEIuy
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.223.199.120
※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1444758441.A.DDB.html
→
10/14 10:38, , 1F
10/14 10:38, 1F
推
10/15 00:01, , 2F
10/15 00:01, 2F
→
10/15 00:02, , 3F
10/15 00:02, 3F
Ajax 近期熱門文章
PTT數位生活區 即時熱門文章
