Я пробовал Paper.js для удовольствия, но, похоже, я уже застрял в самом начале.
Добавление resize="true"
в тег canvas
должно сделать элемент таким же высоким и широким, как и окно браузера. Однако это приводит к некоторому довольно странному поведению.
Я ожидал, что холст настроится на окно просмотра сразу после загрузки страницы, но это не так, поэтому я изначально думал, что он вообще не изменяет размер. Однако на самом деле это еще более странно: холст начинается с размера по умолчанию 300x150, и когда я изменяю размер окна просмотра, он растет - медленно, но неопределенно.
Для записи я попытался использовать data-paper-resize="true"
или просто resize
вместо этого, или с помощью Chrome вместо Firefox - все это безрезультатно.
Я не ожидаю ответа, если эта проблема вызвана какой-то необъяснимой странной настройкой на моем конце. Мне интересно, однако, если проблема распространена (или даже известна как вообще существующая) и имеет известные причины и решения.
Вот код, который я использую:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="paper-full.min.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var path = new Path();
path.strokeColor = 'black';
path.moveTo(new Point(120, 120));
path.lineTo(new Point(500, 500));
</script>
</head>
<body>
<canvas id="myCanvas" style="border: 1px dotted red;" resize="true"></canvas>
</body>
</html>