使用 <canvas> 绘制的网格看起来被拉伸的元素

Grid drawn using a lt;canvasgt; element looking stretched(使用 lt;canvasgt; 绘制的网格看起来被拉伸的元素)

问题描述

我正在尝试在 <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> 绘制的网格看起来被拉伸的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！