Холст работает не так, как задумано - PullRequest
Новая
       0

Холст работает не так, как задумано

0 голосов
/ 18 февраля 2012

Я пробовал скрипт для рисования миллиметровой бумаги, как сетки на холсте, из погружения в html5.В результате я должен нарисовать сетку с квадратами со стороной 10px, но я получаю размер примерно 20px, а не точные квадраты.Вот код, `

   <html>
      <head>     
           <style>
    body{
        margin: 20px 20px 20px 20px;
    }

    canvas{
        width: 500px;
        height: 375px;
        border: 1px solid #000;
    }
    </style>
    <script type="text/javascript">
        function activate(){
            var canvas =document.getElementById("exp");
            var context = canvas.getContext("2d");

            for (var x=0.5;x<500;x+=10){
                context.moveTo(x,0);
                context.lineTo(x,375);
                console.log(x);
            }

            for (var y=0.5;y<375;y+=10){
                context.moveTo(0,y);
                context.lineTo(500,y);
            }

            context.strokeStyle="#000";
            context.stroke();
        }
    </script>
</head>

<body>
    <canvas id="exp"><script type="text/javascript">activate();</script></canvas>
</body
     </html>

И это вывод:canvas renderedв то время как фактический результат должен быть:actual canvasПримечание: меня не беспокоит разница в цвете.что я не понимаю, так это то, почему расстояние между двумя строками составляет ~ 20 пикселей (как проверено инструментом измерения в Firefox) вместо 10 пикселей.Кроме того, при печати значений x он дает правильное значение (то есть увеличивается на 10 каждый раз).

Ответы [ 2 ]

2 голосов
/ 18 февраля 2012

вы не можете установить размер холста с помощью CSS Вы должны установить в атрибуте DOM. 

<canvas width="100" height="200"></canvas>
0 голосов
/ 18 февраля 2012

Javascript может рассчитать для вас.Устанавливайте только параметры:

html: 

<canvas id="exp"></canvas>

js: 

function activate(id, xcount, ycount, width, color) {
    var canvas = document.getElementById(id);
    var context = canvas.getContext("2d");

    canvas.width = xcount * width + 1;
    canvas.height = ycount * width + 1;

    for (var x = 0.5; x < canvas.width; x += width) {
        context.moveTo(x, 0);
        context.lineTo(x, canvas.height);
    }

    for (var y = 0.5; y < canvas.height; y += width) {
        context.moveTo(0, y);
        context.lineTo(canvas.width, y);
    }

    context.strokeStyle = color;
    context.stroke();
}
activate("exp", 37, 50, 10, "#ccc");

Также см. этот пример .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...