我在html中静态定义了一个宽度和高度的canvas元素.如果我尝试使用JavaScript动态调整大小(设置新的宽度和高度 - 无论是在画布的属性上还是通过样式属性),我在Firefox中都会出现以下错误:
未捕获的异常:[异常......"WrappedNative原型对象上的非法操作"nsresult:"0x8057000c(NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)"location:"JS frame :: file:///home/russh/Desktop/test.html :: onclick ::第1行"数据:否]
是否可以调整此元素的大小,还是必须销毁它并动态创建新元素？
所以我最近碰到了这个: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常青浏览器!)
我希望使用百分比大小制作响应式画布,一旦用户调整画布大小相对调整大小.我能够通过使用下面的代码来缩放画布,但唯一的问题是当缩放鼠标绘图消失的窗口大小时.
<style>
body{margin:0px;padding:0px;background:#a9a9a9;}
#main{
display:block;
width:80%;
padding:50px 10%;
height:300px;
}
canvas{display:block;background:#fff;}
</style>
</head>
<body>
<div id="main" role="main">
<canvas id="paint" width="100" height="100">
< !-- Provide fallback -->
</canvas>
</div>
<script>
var c = document.getElementById('paint');
var ctx = c.getContext('2d');
var x = null;
var y;
c.onmousedown = function(e){
x = e.pageX - c.offsetLeft;
y = e.pageY - c.offsetTop;
ctx.beginPath();
ctx.moveTo(x,y);
}
c.onmouseup = function(e){
x=null;
}
c.onmousemove = function(e){
if(x==null) return;
x = e.pageX - c.offsetLeft;
y = e.pageY - c.offsetTop;
ctx.lineTo(x,y); …