我已经开始尝试在Canvas对象上绘图.在过去,我对Canvas的曝光一直围绕着图像处理(NPI),所以我对它的坐标系和转换过程有一定的熟悉.我正在使用屏幕尺寸为30 X 30的测试画布.获得2D上下文的句柄后,我发出一个调用:
ctx.fillRect(0,0,10,10);
在左上角产生一个关于针头大小的黑色规格.要使矩形具有任何大小,请说出大约1/4的画布,需要调整为:
ctx.fillRect(0,0,200,200);
那么,这个帆布的规模是如何缩小的呢？是的,我想我可以将它"缩小"回到类似正常的东西,但我想首先找出造成这种情况的原因.我已经禁止Jquery认为它可能会以某种方式干扰,但这并没有帮助.
有任何想法吗？
更新:
画布沿着以下行添加到dom:
<canvas id='foo_" + self.groupIndex + "' class='hCanvasClassName'>"
CSS将宽度定义为100%,高度由JS代码指定.
小智 5
你没有显示这个代码,但是听起来你已经使用CSS应用了画布的大小,而不是直接在元素上,这可以解释为什么它缩小.
你需要这样做:
<canvas width="30" height="30" id="myCanvas"></canvas>
如果你这样做:
<canvas style="width:30px;height;30px;" id="myCanvas"></canvas>
会发生什么是canvas元素使用默认大小(300x150,请参见此处:http://jsfiddle.net/AbdiasSoftware/CfMNf/),然后通过css将其缩小到30x30,这意味着现在绘制到画布的所有内容都将相应缩放.
| 归档时间： |
|
| 查看次数： |
354 次 |
| 最近记录： |