Javascript画布清除/重绘

本文介绍了Javascript画布清除/重绘的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我已经尝试谷歌回答这个，但我只是在圆圈.... 如果我清除rect（使用clearRect），然后图像不重画。 然而，如果我不清除图像只是堆栈。 我想让它清除当前图像，然后用新的图像绘制。 我缺少什么？ 它与图像负载有关吗？ 对不起，如果这是一个问题重复，我找不到这个的确切答案 - 我试过别人建议，但结果很差。I've tried googling the answer to this but i'm just going around in circles....If I clear the rect (using clearRect) then the image doesn't redraw after.However, if I don't clear the images just stack.What I want it to clear the current image and then draw with new one.What am I missing?Does it have something to do with the image Load ?Sorry if this is a question repeat, I couldn't find the exact answer to this- and I tried what others suggested but results were poor. http://jsfiddle.net/bxeuhh4h/function clear() { var canvasTemp = document.getElementById(imgSection); var ctxTemp = canvasTemp.getContext("2d"); ctxTemp.clearRect(0, 0, 500, 500);}function fillColorOrPattern(imgSection,currentcolor){if ((oldcolor !== currentcolor) || (oldxImgToBeFilled !== xImgToBeFilled)){ clear();}imgFill.onload = function () {imgToBeFilled.onload = function () { if ((oldcolor !== currentcolor) || (oldxImgToBeFilled !== xImgToBeFilled)){ fill(imgSection,currentcolor) } };imgToBeFilled.src = xImgToBeFilled;}imgFill.src = xImgFill;}function fill(imgSection,currentcolor){canvas = document.getElementById(imgSection);ctx = canvas.getContext("2d");ctx.drawImage(imgToBeFilled, 0, 0);ctx.globalCompositeOperation = "source-atop";console.log(isItColorOrPattern); if (isItColorOrPattern == "color"){ ctx.rect(0, 0, canvas.width, canvas.height); console.log("currentcolor: " + currentcolor); ctx.fillStyle = getColor(currentcolor); console.log(getColor(currentcolor)); ctx.fill(); }else{ var pattern = ctx.createPattern(imgFill, 'repeat'); console.log("canvas.width: " + canvas.width); console.log("xImgFill: " + xImgFill); console.log(canvas.getContext); ctx.rect(0, 0, canvas.width, canvas.height); ctx.fillStyle = pattern; ctx.fill(); } ctx.globalAlpha = .10; ctx.drawImage(imgToBeFilled, 0, 0); ctx.drawImage(imgToBeFilled, 0, 0); ctx.drawImage(imgToBeFilled, 0, 0); oldcolor = currentcolor; oldxImgToBeFilled = xImgToBeFilled;}$(window).load(function(){imgToBeFilled = new Image();imgFill = new Image();fillColorOrPattern(imgSection,currentcolor);}推荐答案您需要在其中添加 beginPath（）。 rect（）路径， clearRect（）不会清除这些。同样重置comp。模式和alpha，因为他们是sticky。You need to add a beginPath() in there. rect() will accumulate rectangles to the path, clearRect() won't clear those. Also reset comp. mode and alpha as they are sticky.如果使用 fillRect（）而不是 rect（），则可以避免 beginPath（） + $ fill（）路径。You could avoid beginPath() if you use fillRect() instead of rect() + fill() (added example below) as fillRect() does not add to the path.function fill(imgSection,currentcolor){ // these should really be initialized outside the loop canvas = document.getElementById(imgSection); ctx = canvas.getContext("2d"); // clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // clear path ctx.beginPath(); // use default comp. mode ctx.globalCompositeOperation = "source-over"; // reset alpha ctx.globalAlpha = 1; ctx.drawImage(imgToBeFilled, 0, 0); ctx.globalCompositeOperation = "source-atop"; if (isItColorOrPattern === "color"){ // rect() accumulates on path ctx.rect(0, 0, canvas.width, canvas.height); ctx.fillStyle = getColor(currentcolor); ctx.fill(); // instead of rect() + fill() you could have used: // fillRect() does not accumulate on path // fillRect(0, 0, canvas.width, canvas.height); } else { var pattern = ctx.createPattern(imgFill, 'repeat'); ctx.rect(0, 0, canvas.width, canvas.height); ctx.fillStyle = pattern; ctx.fill(); } ctx.globalAlpha = .1; ctx.drawImage(imgToBeFilled, 0, 0); ctx.drawImage(imgToBeFilled, 0, 0); ctx.drawImage(imgToBeFilled, 0, 0); oldcolor = currentcolor; oldxImgToBeFilled = xImgToBeFilled;} 这篇关于Javascript画布清除/重绘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！