在相对大小的画布上绘制形状

Question

我有这个代码绘制一个圆圈。如何更改此代码以便红色圆圈是浏览器窗口的100％？我想让红色圆圈在浏览器窗口中调整大小。

<canvas width="100%" height="100%"></canvas> 

    var ctx; 

    function draw() { 

    ctx = $('canvas').get(0).getContext('2d'); 

     ctx.canvas.width = window.innerWidth; 
     ctx.canvas.height = window.innerHeight; 
    } 


    function circle(x, y, r, c) { 
     ctx.beginPath(); 
     var rad = ctx.createRadialGradient(x, y, 1, x, y, r); 
     rad.addColorStop(0, 'rgba('+c+',1)'); 
     rad.addColorStop(1, 'rgba('+c+',0)'); 
     ctx.fillStyle = rad; 
     ctx.arc(x, y, r, 0, Math.PI*2, false); 
     ctx.fill(); 
    } 


    draw(); 


    circle(128, 128, 200, '255,0,0'); 

Answer 1

考虑这个jsfiddle

上load/resize：

创建圆圈draw()然后setVars()然后circle(...)

draw()（它设置在画布的宽度/高度）将清除画布（请参阅：How to clear the canvas for redrawing）

var ctx, canvas, x, y, w, h, r; 

function draw() { 
    ctx = $('canvas').get(0).getContext('2d'); 
    canvas = ctx.canvas; 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 
} 

function setVars() { 
    w = canvas.width; 
    h = canvas.height; 
    x = w/2; 
    y = h/2; 
    r = x < y ? x : y; 
} 

function circle(x, y, r, c) { 
    ctx.beginPath(); 
    var rad = ctx.createRadialGradient(x, y, 1, x, y, r); 
    rad.addColorStop(0, 'rgba(' + c + ',1)'); 
    rad.addColorStop(1, 'rgba(' + c + ',0)'); 
    ctx.fillStyle = rad; 
    ctx.arc(x, y, r, 0, Math.PI * 2, false); 
    ctx.fill(); 
} 

function makeCircle() { 
    draw(); 
    setVars(); 
    circle(x, y, r, '255,0,0'); 
} 

$(window).resize(function() { 
    // redraw (onresize) 
    makeCircle(); 
}); 

// draw (onload) 
makeCircle();