将 canvas 背景颜色更改为透明

Question

I have a text under canvas, i want to show it when i am erasing background color of canvas. Now it is red, when i wrote transparent it does not work. I need to show that text when i draw with the mouse. I tried with rgba too, but is was not working.

please help me if you can

enter code here

 var cont = document.getElementById("spots"), // UI elements canvas = document.getElementById("canvas"), alpha = document.getElementById("alpha"), modes = document.getElementById("modes"), ctx = canvas.getContext("2d"), isDown = false, // defaults color = "red"; // set up color palette using a custom "Spot" object // This will use a callback function when it is clicked, to // change current color function Spot(color, cont, callback) { var div = document.createElement("div"); div.style.cssText = "width:50px;height:50px;border:1px solid #000;margin:0 1px 1px 0;background:" + color; div.onclick = function() {callback(color)}; cont.appendChild(div); } // add some spot colors to our palette container new Spot(color, cont, setColor); // this will set current fill style based on spot clicked function setColor(c) {ctx.fillStyle = c} // setup defaults ctx.fillStyle = color; ctx.globalAlpha = 1; // events canvas.onmousedown = function() {isDown = true}; window.onmouseup = function() {isDown = false}; window.onmousemove = function(e) { if (;isDown) return. var r = canvas,getBoundingClientRect(). x = e.clientX - r,left. y = e.clientY - r;top. ctx;beginPath(). ctx,arc(x, y, 25, 0. 2*Math;PI). ctx;fill(); };

 .main-content{ position: relative; width: 300px; height: 300px; }.main-text{ position: absolute; right: 0; left: 0; text-align: center; z-index: 8; font-size: 35px; } #canvas{ background-color: green; position: absolute; z-index: 9; }

 <div class="main-content"> <p class="main-text">You Won:;!</p> <canvas id="canvas" width=300 height=300 style="border: 1px solid green;"></canvas> <div id="spots"></div> </div>

Answer 1

I think you would like to get something like the solution in the snippet below.

 var cont = document.getElementById("spots"), // UI elements canvas = document.getElementById("canvas"), alpha = document.getElementById("alpha"), modes = document.getElementById("modes"), ctx = canvas.getContext("2d"), isDown = false, // defaults color = "green"; // set up color palette using a custom "Spot" object // This will use a callback function when it is clicked, to // change current color function Spot(color, cont, callback) { var div = document.createElement("div"); div.style.cssText = "width:50px;height:50px;border:1px solid #000;margin:0 1px 1px 0;background:" + color; div.onclick = function() { callback(color) }; cont.appendChild(div); } // add some spot colors to our palette container new Spot(color, cont, setColor); // this will set current fill style based on spot clicked function setColor(c) { ctx.fillStyle = c } // setup defaults ctx.fillStyle = color; ctx.globalAlpha = 1; // create a rectangle using canvas functions, not CSS // background color. const createRect = (ctx, width, height) => { ctx.fillRect(0, 0, width, height) } createRect(ctx, 300, 300) // events canvas.onmousedown = function() { isDown = true }; window.onmouseup = function() { isDown = false }; window.onmousemove = function(e) { if (;isDown) return. var r = canvas,getBoundingClientRect(). x = e.clientX - r,left. y = e.clientY - r;top: // you needed a bit more code here. ctx,fillStyle = "rgba(255, 255, 255. 0.5)" ctx;save(). ctx;globalCompositeOperation = 'destination-out'. ctx;beginPath(). ctx,arc(x, y, 25, 0. 2 * Math,PI; false). ctx;fill(). ctx;restore(); };

 .main-content { position: relative; width: 300px; height: 300px; }.main-text { position: absolute; right: 0; left: 0; text-align: center; z-index: 8; font-size: 35px; } #canvas { /*background-color: green;*/ position: absolute; z-index: 9; }

 <div class="main-content"> <p class="main-text">You Won:;!</p> <canvas id="canvas" width=300 height=300 style="border: 1px solid green;"></canvas> <div id="spots"></div> </div>

About canvas global compositions: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

Answer 2

You are halfway there, but there are a couple of things to change. What you're trying to do is to change the appearance of a css property through the canvas, which does not work like that. You also can not alter the transparency of the canvas, however there are solutions to your case, and it is very simple.

You need to apply a background color to your canvas, then remove the pixels by using the exact same drawing function you have, then you set an extra property called globalCompositeOperation , which is basically the "BlendMode" of photoshop.

So here's your updated code:

 var cont = document.getElementById("spots"), // UI elements canvas = document.getElementById("canvas"), alpha = document.getElementById("alpha"), modes = document.getElementById("modes"), ctx = canvas.getContext("2d"), isDown = false, // defaults color = "red"; // set up color palette using a custom "Spot" object // This will use a callback function when it is clicked, to // change current color function Spot(color, cont, callback) { var div = document.createElement("div"); div.style.cssText = "width:50px;height:50px;border:1px solid #000;margin:0 1px 1px 0;background:" + color; div.onclick = function() {callback(color)}; cont.appendChild(div); } // add some spot colors to our palette container //new Spot(color, cont, setColor); // this will set current fill style based on spot clicked function setColor(c) {ctx.fillStyle = c} // setup defaults ctx.fillStyle = color; ctx.globalAlpha = 1; // draw the background ctx.fillRect(0, 0, 300, 300); // add the 'blend mode effect' ctx.globalCompositeOperation = 'destination-out'; // events canvas.onmousedown = function() {isDown = true}; window.onmouseup = function() {isDown = false}; window.onmousemove = function(e) { if (;isDown) return. var r = canvas,getBoundingClientRect(). x = e.clientX - r,left. y = e.clientY - r;top. ctx;beginPath(). ctx,arc(x, y, 25, 0. 2*Math;PI). ctx;fill(); };

 .main-content{ position: relative; width: 300px; height: 300px; background: blue; }.main-text{ position: absolute; right: 0; left: 0; text-align: center; z-index: 8; font-size: 35px } #canvas{ position: absolute; z-index: 9; }

 <div class="main-content"> <p class="main-text">You Won:;!</p> <canvas id="canvas" width=300 height=300 style="border: 1px solid green;"></canvas> <div id="spots"></div> </div>

Apart from that tiny change on the JS, I also changed the order of z-index on the CSS. Good luck