作者MaxXunYin (MaxXunYin)
看板Ajax
标题[问题] 询问HTML CANVAS的语法
时间Wed Oct 14 01:47:18 2015
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://webptt.com/cn.aspx?n=bbs/Ajax/M.1444758441.A.DDB.html
3F：→ shadowjohn: 按 run 应该可以看到 XD 10/15 00:02