Это классический пример CORS, который обозначает перекрестное совместное использование ресурсов. Borwsers запрещают отправлять AJAX-запрос в домен, отличный от того, откуда был создан файл javscript. Как говорится в сообщении об ошибке, вы должны установить HTTP-заголовок «Access-Control-Allow-Origin» из кода своего сервера. Узнайте больше о CORS здесь [введите описание ссылки здесь CORS MDN
Я считаю, что нашел элегантное решение для этого:
JavaScript
/* important! for alignment, you should make things
* relative to the canvas' current width/height.
*/
function draw() {
var ctx = (a canvas context);
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
//...drawing code...
}
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
}
До сих пор не было никакого большого негативного влияния на производительность.
Во-первых, вы не можете использовать атрибуты width и height, чтобы изменить размер (по крайней мере, с моей точки зрения), потому что это сломает его. Вы можете сделать это: HTML:
<canvas id = 'myCanvas'></canvas>
JS:
var canvas = document.getElementById('myCanvas');
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
(Пожалуйста, прости меня за любые опечатки, я склонен делать это много)
Если ваш div полностью заполнил веб-страницу, вы можете заполнить этот div и получить холст, который заполняет div.
Это может показаться вам интересным, так как вам может потребоваться использовать css для использования процента, но это зависит от того, какой браузер вы используете, и насколько он соответствует спецификации: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
Внутренние размеры холста элемент равен размеру координатное пространство, с числами интерпретируется в пикселях CSS. Однако, размер элемента может быть произвольным таблицей стилей. Во время рендеринга изображение масштабируется, чтобы соответствовать этому макету size.
Вам может потребоваться получить offsetWidth и высоту div или получить высоту / ширину окна и установить их в качестве значения пикселя.
Unless you want the canvas to upscale your image data automatically (that's what James Black's answer talks about, but it won't look pretty), you have to resize it yourself and redraw the image. Centering a canvas