← Canvas 图像滤镜 - 黑白 Canvas isPointInStroke() →

Canvas imageSmoothingEnabled 反锯齿

突然记起一个小知识点，就是 drawImage() 中的参数 dWidth 和 dHeight

我们之前有说过，如果将这两个参数设置的比图片本身要大或者小，那么图片就会被放大或者缩小

咦，我们不就可以使用这个来做一个图片放大镜

drawImage() 实现图片放大镜

我们先使用 getImageData() 方法获取鼠标附近 4x4 像素的图片，然后使用 putImageData() 方法画到一个新的画布上，最后使用 drawImage() 方法放大 50 倍

<!DOCTYPE html>
<meta charset="utf-8"> 
<div style="border:1px solid #ccc">
<canvas id="canvas-1" width="520" height="300">
</canvas>
</div>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

var c2 = document.createElement("canvas");
c2.width  =4;
c2.height =4;
ctx2 = c2.getContext("2d");

var img = new Image();
img.src = '/static/i/meimei_160x160.png';
img.onload = function() {
    draw(this);
};

function draw(img) {
    ctx.clearRect(0,0,c.width,c.height);
    ctx.drawImage(img,10,10,img.width,img.height);
}

function zoom(e) {

    draw(img);

    var x = event.layerX;
    var y = event.layerY;

    ctx2.clearRect(0,0,c2.width,c2.height);

    var imageData  = ctx.getImageData(x - 2 ,y-2, 4, 4);
    ctx2.putImageData(imageData,0,0);

    ctx.drawImage(c2,Math.abs(x + 5),Math.abs(y + 5),200, 200);
}

c.addEventListener('mousemove', zoom);
</script>

运行结果如下

咦，放大的时候图片怎么模糊了，而不是一个一个小像素点了？

翻了好久的 API 文档，我才发现原来 drawImage() 默认情况下是抗锯齿的，也就是平滑化了

而设置这个抗锯齿的属性是 imageSmoothingEnabled ，默认值为 true

Canvas imageSmoothingEnabled 属性

ctx.imageSmoothingEnabled 用于设置图片是否平滑，也就是是否抗锯齿

true 表示图片平滑（默认值），false 表示图片不平滑

语法

ctx.imageSmoothingEnabled = value;

值	说明
value	布尔类型，`true` 表示图片平滑（默认值），`false` 表示图片不平滑

默认设置 ( true ) 会造成图片模糊并且破坏图片原有的像素

范例

我们可以将 ctx.imageSmoothingEnabled 设置为 false，然后再看看我们的图片放大镜

<!DOCTYPE html>
<meta charset="utf-8">

运行结果如下

哇，完美

← Canvas 图像滤镜 - 黑白 Canvas isPointInStroke() →

简单教程

Canvas imageSmoothingEnabled 反锯齿

drawImage() 实现图片放大镜

Canvas imageSmoothingEnabled 属性

语法

范例

Canvas 基础教程