第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 JavaScript 將畫布的背景顏色設(shè)為白色?

如何使用 JavaScript 將畫布的背景顏色設(shè)為白色?

富國滬深 2021-05-31 14:41:05
我想做的事我想知道如何使背景顏色變白。我用畫布構(gòu)建了一個繪圖應(yīng)用程序。您可以通過單擊下載按鈕下載您繪制的畫布圖像。但它的背景顏色是黑色(技術(shù)上透明)。怎么改成白色?我試過的我將以下代碼添加到我的代碼中,但效果不佳。我什么也畫不出來。ctx.fillStyle = "#fff";ctx.fillRect(0, 0, canvas.width, canvas.height);這是我的代碼const canvas = document.querySelector('#draw');const ctx = canvas.getContext('2d');ctx.strokeStyle = '#BADA55';  ...function draw(e) {  if (!isDrawing) return;  console.log(e);  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;  ctx.beginPath();  ctx.moveTo(lastX, lastY);  ctx.lineTo(e.offsetX, e.offsetY);  ctx.stroke();  [lastX, lastY] = [e.offsetX, e.offsetY];  ...}canvas.addEventListener('mousedown', (e) => {  isDrawing = true;  [lastX, lastY] = [e.offsetX, e.offsetY];});canvas.addEventListener('mousemove', draw);  ...downloadBtn.addEventListener('click', downloadImage);function downloadImage() {  if (canvas.msToBlob) {    const blob = canvas.msToBlob();    window.navigator.msSaveBlob(blob, filename);  } else {      downloadLink.href = canvas.toDataURL('image/png');      downloadLink.download = filename;      downloadLink.click();  }}我想將下載圖像的背景顏色設(shè)為白色。
查看完整描述

3 回答

?
吃雞游戲

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個贊

在畫布上,您可以getAttribute()用來檢索尺寸。看我的片段:


let canvas = document.getElementById('canvas');

let cheight = parseInt(canvas.getAttribute("height"));

let cwidth = parseInt(canvas.getAttribute("width"));


let context = canvas.getContext('2d');


context.fillStyle = "green";

context.fillRect(0,0,cwidth,cheight);

<canvas width="200" height="200" id="canvas">


查看完整回答
反對 回復(fù) 2021-06-03
?
慕沐林林

TA貢獻(xiàn)2016條經(jīng)驗(yàn) 獲得超9個贊

您可以使用以下代碼設(shè)置畫布的背景顏色。


var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

context.fillStyle = "green";

context.fillRect(0, 0, canvas.width, canvas.height);

canvas{ border: 1px solid black; }

<canvas width=300 height=150 id="canvas">


查看完整回答
反對 回復(fù) 2021-06-03
?
眼眸繁星

TA貢獻(xiàn)1873條經(jīng)驗(yàn) 獲得超9個贊

在您的draw()函數(shù)中,您需要專門添加這樣的背景:


const canvas = document.querySelector('#draw');

const ctx = canvas.getContext('2d');

ctx.strokeStyle = '#BADA55';

ctx.fillStyle = "#ffffff"; //HERE, use HEX format in 6 digits

ctx.fillRect(0, 0, canvas.width, canvas.height); //HERE


 ...


function draw(e) {

    ...

}

為什么?

您需要在所有內(nèi)容之前繪制背景,否則一遍又一遍地繪制背景,或者在所有內(nèi)容之上都會導(dǎo)致白色矩形與畫布上的所有內(nèi)容重疊。


查看完整回答
反對 回復(fù) 2021-06-03
  • 3 回答
  • 0 關(guān)注
  • 753 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號