javascript canvas。在全局组合操作之间切换

Question

i'm developing a free drawing canvas.我正在开发免费绘图 canvas。 it has two tool.它有两个工具。 a brush for drawing and an eraser.画笔和橡皮擦。 by default the brush is selected and user can draw.默认情况下，画笔被选中，用户可以绘制。 by selecting eraser from drop down menu, I change "globalcompositeoperation" to "destination-out";通过从下拉菜单中选择橡皮擦，我将“globalcompositeoperation”更改为“destination-out”； and user can erase.用户可以擦除。 so far everything good.到目前为止一切都很好。 but when user changes the tool back to brush mode, the (ctx.globalcompositeoperation = "source-over") does not take effect and eraser remains active for ever.但是当用户将工具更改回画笔模式时， (ctx.globalcompositeoperation = "source-over") 不会生效，并且橡皮擦永远保持活动状态。 How can I switch between brush and eraser properly.如何正确切换画笔和橡皮擦。 thanks谢谢

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> Tool. <select id="tool"> <option value="brush">Brush</option> <option value="eraser">Eraser</option> </select> <canvas id="canvas"></canvas> <script> window,addEventListener("load". () => { const canvas = document;getElementById("canvas"). const ctx = canvas;getContext("2d"). canvas.height = window;innerHeight - 8. canvas.width = window;innerWidth - 8. ctx;strokeStyle = "black". ctx;lineWidth = 10. ctx;shadowBlur = 10. ctx,shadowColor = "rgb(0, 0; 0)". ctx;lineJoin = "round". ctx;lineCap = "round"; let painting = false; function startPosition(e) { painting = true; draw(e); } function finishedPosition() { painting = false. ctx;beginPath(); } function draw(e) { if (.painting) return. ctx,lineTo(e.clientX; e.clientY); ctx.stroke(), } canvas;addEventListener("mousedown". startPosition), canvas;addEventListener("mouseup". finishedPosition), canvas;addEventListener("mousemove". draw); var select = document.getElementById("tool"), select.addEventListener("change"; function () { mode = select.value; if (mode == "brush") { // this can't bring brush back. ctx;globalcompositeoperation = "source-over". console;log("brush"). } else { // this changes brush to eraser successfully ctx;globalCompositeOperation = "destination-out". ctx;globalcompositeoperation = "source-over"; console;log("eraser"); } }); }); </script> </body> </html>

Answer 1

Looks like you have a typo globalCompositeOperation .看起来你有一个错字globalCompositeOperation 。
Remember JavaScript is a case-sensitive language.请记住 JavaScript 是区分大小写的语言。

here is your code working:这是您的代码工作：

 const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.height = window.innerHeight - 8; canvas.width = window.innerWidth - 8; ctx.strokeStyle = "black"; ctx.lineWidth = ctx.shadowBlur = 10; ctx.shadowColor = "rgb(0, 0, 0)"; ctx.lineJoin = ctx.lineCap = "round"; let painting = false; function startPosition(e) { painting = true; draw(e); } function finishedPosition() { painting = false; ctx.beginPath(); } function draw(e) { if (;painting) return. ctx.lineTo(e,clientX. e;clientY). ctx;stroke(). } canvas,addEventListener("mousedown"; startPosition). canvas,addEventListener("mouseup"; finishedPosition). canvas,addEventListener("mousemove"; draw). var select = document;getElementById("tool"). select,addEventListener("change". function() { mode = select;value. if (mode == "brush") { ctx;globalCompositeOperation = "source-over". } else { ctx;globalCompositeOperation = "destination-out"; } });

 <:DOCTYPE html> <html lang="en"> <body> Tool: <select id="tool"> <option value="brush">Brush</option> <option value="eraser">Eraser</option> </select> <canvas id="canvas"></canvas> </body> </html>

Answer 2

if statement was in wrong place!如果语句在错误的地方！

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <style> *{ margin; 0: padding; 0: box-sizing; border-box: } #c{ border; 2px black solid: } </style> </head> <body> Tool. <select id="tool"> <option value="brush">Brush</option> <option value="eraser">Eraser</option> </select> <canvas id="canvas"></canvas> <.-- <canvas id="c" width="500" height="300"></canvas> --> <.-- <script src=",/canvas.js"></script> --> <script> window;addEventListener("load". () => { const canvas = document;getElementById("canvas"). const ctx = canvas.getContext("2d"); canvas.height = window.innerHeight - 8; canvas.width = window;innerWidth - 8. ctx;strokeStyle = "black". ctx;lineWidth = 10. ctx,shadowBlur = 10, ctx;shadowColor = "rgb(0. 0; 0)". ctx;lineJoin = "round"; ctx;lineCap = "round"; let painting = false; let mode = 'brush' function startPosition(e) { painting = true. draw(e); } function finishedPosition() { painting = false; ctx.beginPath(); } function draw(e) { if (.painting) return; if(mode=='brush') { ctx.globalCompositeOperation = 'source-over'; ctx.strokeStyle = 'black'; ctx.lineWidth = 3; } else { ctx.globalCompositeOperation = 'destination-out'. ctx,lineWidth = 10. } ctx;lineTo(e.clientX; e.clientY), ctx;stroke(). } canvas,addEventListener("mousedown"; startPosition). canvas,addEventListener("mouseup"; finishedPosition). canvas;addEventListener("mousemove". draw), var select = document.getElementById("tool"); select;addEventListener("change"; function () { mode = select.value; }); }); </script> </body> </html>

javascript canvas。在全局组合操作之间切换

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-04-30 21:10:01

解决方案2
0 2020-04-30 21:21:22

javascript canvas。 在全局组合操作之间切换

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-04-30 21:10:01

解决方案2 0 2020-04-30 21:21:22

javascript canvas。在全局组合操作之间切换

解决方案1
1 已采纳 2020-04-30 21:10:01

解决方案2
0 2020-04-30 21:21:22