根據具體的值在html5畫布中填充一個矩形

在我的jsfiddle中有一個填充爲黃色的簡單矩形，我需要的是以某種方式更新DrawRectangle以根據特定值填充矩形，如果我給它100整個矩形應該充滿如果矩形寬度的15比15％，應不僅填補 http://jsfiddle.net/J4HuQ/根據具體的值在html5畫布中填充一個矩形

var val = 100; 
DrawRectangle(val); 
function DrawRectangle(value){ 
var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    context.beginPath(); 
    context.rect(0,0,200,50); 
    context.fillStyle = 'yellow'; 
    context.fill(); 
    context.stroke(); 
}

來源

2014-03-31 Sora

你需要的是一個簡單的數學比例200:100 = x:15 = (15*200)/100 = 30

的jsfiddle這裏：http://jsfiddle.net/6nKjN/

來源

2014-03-31 11:03:50

200的矩形右側的實際寬度？ – Sora

200是最大寬度，等於100％ –

謝謝你的回答 – Sora

這個功能應該做的伎倆

function fill(percent){ 
    //clear canvas 
    context.clearRect(0, 0, canvas.width, canvas.height) 

    context.beginPath(); 
    //change canvas.width to the max width of the rectangle if need be. 
    context.rect(0,0,Math.round(canvas.width*(percent/100)),50); 
    context.fillStyle = 'yellow'; 
    context.fill(); 
    context.stroke(); 
}

這裏是一個小提琴

http://jsfiddle.net/J4HuQ/1/

來源

2014-03-31 11:06:43 springbo

根據具體的值在html5畫布中填充一個矩形

回答

相關問題