JS - 用背景色填充畫布

是否可以爲畫布賦予背景色？所以當圖像被提交時，它會有一個顏色，而不是空白（如果圖像不夠大）。有沒有人有任何想法如何做到這一點？JS - 用背景色填充畫布

填充有彩色帆布背景下似乎沒有工作

var canvas = document.getElementById('canvas'); 
var image = new Image(); 
image.src = 'http://placehold.it/300x550'; 
image.onload = function() { 
    var canvasContext = canvas.getContext('2d'); 
    var wrh = image.width/image.height; 
    var newWidth = canvas.width; 
    var newHeight = newWidth/wrh; 
    if (newHeight > canvas.height) { 
       newHeight = canvas.height; 
     newWidth = newHeight * wrh; 
    } 
    var xOffset = newWidth < canvas.width ? ((canvas.width - newWidth)/2) : 0; 
    var yOffset = newHeight < canvas.height ? ((canvas.height - newHeight)/2) : 0; 

    canvasContext.drawImage(image, xOffset, yOffset, newWidth, newHeight); 
    canvasContext.fillStyle = "red"; 
    };

來源

2016-09-21 Admamza

這個答案並不在這個例子中 – Admamza

@Admamza工作。再看看......這個答案確實可以用你的例子 - 在'drawImage'之前執行'fillRect'。 :-P – markE

Ofcourse我沒有做fillRect！謝謝 – Admamza

只需轉到的.html文件，並創建一個<style>標籤。

<head> 
    <style> 
     canvas{ 
      background-color: red; 
     } 
    </style> 
</head>

來源

2016-09-21 19:37:53 adr1Script

好努力。您的解決方案將爲canvas元素提供背景顏色，但是當畫布轉換爲圖像時，背景將不可見。 – markE

canvasContext.fillStyle = "white"; 
canvasContext.fillRect(0, 0, canvas.width, canvas.height); 
canvasContext.drawImage(image,xOffset, yOffset, newWidth , newHeight);

來源

2016-09-21 20:05:57 Admamza

JS - 用背景色填充畫布

回答

相關問題