核心代码非常短:
var eightBit = function (canvas, image, scale) {
scale *= 0.01;
canvas.width = image.width...;
canvas.height = image.height;
// 将图片缩小
var scaledW = canvas.width * scale;
var scaledH...= canvas.height * scale;
var ctx = canvas.getContext('2d');
// 禁止浏览器的平滑处理
ctx.mozImageSmoothingEnabled..., 0, 0, scaledW, scaledH, 0, 0, canvas.width, canvas.height);
};
背后的原理是将小尺寸的图片放到大尺寸的画布上,自然会“糊”,就像我们把...因为要先缩小再真正画到画布上,所以先 draw image,再 draw canvas。从前我用 drawImage 基本画的都是媒体对象,这次画的是个 canvas 对象,对这个用法还蛮新奇的。