使用 <canvas> 绘制的网格看起来被拉伸的元素 [英] Grid drawn using a <canvas> element looking stretched
本文介绍了使用 <canvas> 绘制的网格看起来被拉伸的元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在 <canvas>
元素上绘制网格,最终目标是制作
I'm trying to draw a grid on a <canvas>
element with the ultimate goal of making a Go board.
For some reason the grid is looking stretched, with the lines being thicker than 1 pixel and the spacing being completely wrong. It doesn't even start in the (10,10)
position..
It would be great if someone could take a look at tell me what I'm doing wrong.
http://jsfiddle.net/h2yJn/
解决方案
I've found the problem. I was setting the dimensions of the <canvas>
using CSS, when you actually have to set the width and height attributes. This was causing it to be stretched/skewed.
var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');
http://jsfiddle.net/h2yJn/66/
这篇关于使用 <canvas> 绘制的网格看起来被拉伸的元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文