[问题] 询问HTML CANVAS的语法

楼主: MaxXunYin (MaxXunYin)   2015-10-14 01:47:18
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
作者: mmis1000 (秋月恋枫)   2015-10-14 10:38:00
https://goo.gl/yKqvJf 拜托不要直接贴code上来阿...
作者: shadowjohn (转角遇到爱)   2015-10-15 00:01:00

Links booklink

Contact Us: admin [ a t ] ucptt.com