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

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

如何用JavaScript制作帆布白色的背景色?

如何用JavaScript制作帆布白色的背景色?

瀟瀟雨雨 2019-04-24 21:15:32
我想做的事我想知道如何使背景顏色變白。我用畫布構(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 回答

?
慕的地6264312

TA貢獻1817條經(jīng)驗 獲得超6個贊

您可以使用以下代碼設(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ù) 2019-05-17
?
三國紛爭

TA貢獻1804條經(jīng)驗 獲得超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ù) 2019-05-17
  • 3 回答
  • 0 關(guān)注
  • 914 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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