Canvas imageSmoothingEnabled 反锯齿

突然记起一个小知识点,就是 drawImage() 中的参数 dWidthdHeight

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

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

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 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.