所以我最近碰到了这个:http://www.nicalis.com/index.php
我很好奇:有没有办法用较小的图像做这种事情？我的意思是,它是像素艺术,而不是使用每个像素大小翻两番的图像,我们不能用代码拉伸它们吗？所以我开始尝试实现它.
我尝试过CSS,Javascript甚至HTML,但都没有.它们都非常糟糕(如下所示:http://jsfiddle.net/nUVJt/2/),这让我想到了一个问题:你可以在没有任何抗锯齿的情况下在浏览器中拉伸图像吗？
我对任何建议持开放态度,无论是使用画布,jQuery,CSS3还是其他什么.
谢谢您的帮助!
编辑:现在有更好的方法来做到这一点!一种稍微不那么强硬的方式!这是魔术:
.pixelated {
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
image-rendering: pixelated;
}
这将阻止所有现代浏览器中的抗锯齿.它甚至可以在IE7-8中工作,但不会在9中工作,我不知道有什么办法在9中做到这一点,不幸的是(除了下面概述的画布黑客).与JS相比,用这种方式做得多快得多.以下是有关这些内容的更多信息:https://developer.mozilla.org/en-US/docs/CSS/Image-rendering
EDIT2:因为这还不是官方规范,所以它不太可靠.Chrome和FF似乎都停止支持它,因为我写了上面的内容(根据下面提到的这篇文章),这真的很烦人.在我们真正开始在CSS中使用它之前,我们可能还需要等待几年,这真的很不幸.
最终编辑:现在有一种官方方式可以做到这一点!有一个叫做的新房产image-rendering.这是CSS3规范.支持现在非常不稳定,但Chrome只是增加了支持,所以在不久之后我们就能说出来image-rendering: pixelated;并且它可以在所有地方工作(yaayy常青浏览器!)
我有一个问题.我正在研究一个相当大的JavaScript项目,我正在学习如何使用OOP.JS中有点奇怪,我相信你知道.
所以这就是我要做的事情:我有一个基础'课',我打电话AbstractAnimal.我有另一个叫做的课Animals.里面的Animals类我有三个组,即Man,Monkey和Elephant.我希望每个组都继承AbstractAnimal,但要成为自己的功能,而不是连接到AbstractAnimal.
我最初是这样做的:
Animals.prototype.Man = AbstractAnimal;
Animals.prototype.Monkey = AbstractAnimal; //etc...
然而,遗憾的是,这并不是我需要它做的事情.原因如下:
AbstractAnimal.prototype.clicked = function() { console.log("clicked") };
//If I change Man...
animals.Man.clicked = function() { console.log("HA!"); };
//Monkey is effected too...
animals.Monkey.clicked();
//Console: "HA!"
在上面的示例中,当单击Monkey时,我希望控制台说"单击".单击Man时,应该说"HA!".
所以我发现了一些我认为会在这里做的事情:javascript类继承自Function类
它几乎起作用,但并不完全.这是一个简化的测试用例:http://jsfiddle.net/9KRJk/2/
我能帮帮我吗？谢谢!
PS不,实际上,整个动物都是隐喻的,我实际上并不是在编写一个动物园.:)