1

Как правильно заливать область, почему получается прямоугольник? Разве координатная сетка не должна быть в пикселях?

https://jsfiddle.net/fLn0nt4f/

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

<style type="text/css">
#canvas {
    height: 500px;
    width: 500px;
}
</style>

<script type='text/javascript'>
    var w = 50;
    var h = 50;
    var pointR = 10;
    var x = (w / 2);
    var y = (h / 2);

    var c = document.getElementById('canvas');
    var ctx = c.getContext('2d');

    // Create gradient
    var grd = ctx.createRadialGradient(x, y, 9, x, y, 10);
    grd.addColorStop(0, '#fff');
    grd.addColorStop(1, '#000');

    // Fill with gradient
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, w, h);
</script>

1 ответ 1

5

потому что размеры холста надо в теге canvas указывать

var w = 50;
var h = 50;
var pointR = 10;
var x = (w / 2);
var y = (h / 2);

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');

// Create gradient
var grd = ctx.createRadialGradient(x, y, 9, x, y, 10);
grd.addColorStop(0, '#fff');
grd.addColorStop(1, '#000');

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0, 0, w, h);
#canvas {
    height: 500px;
    width: 500px;
}
<canvas width="500" height="500" id="canvas"></canvas>

2
  • А если я хочу подгонять его под ширину страницы?
    – Fangog
    11 авг 2016 в 19:02
  • @Fangog подгоняйте, в чём проблема то?
    – ampawd
    11 авг 2016 в 19:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.