更改 canvas 填充样式而不与之前的颜色重叠

Question

我正在尝试更改聚焦和聚焦事件的填充样式。当事件多次调用时，它会重叠。这是我的代码：

function FillColorToFields(id, isOnFocus) {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var coordinates = $('#hidCoord_' + id).val().split(',');
    if (isOnFocus) {
        context.fillStyle = "rgba(0,255,0,0.1)";
        context.fillRect(coordinates[0], coordinates[1], coordinates[2], coordinates[3]);
    } else {
        context.fillStyle = "rgba(255, 255, 255, 0.5)";
        context.fillRect(coordinates[0], coordinates[1], coordinates[2], coordinates[3]);
    }
}

Answer 1

只需使用context.clearRect(x, y, width, height)。它的目的是擦除矩形的任何先前绘制的内容（查看 documentation). See this forked fiddle 的示例。

Answer 2

我将图像设置为 canvas 背景图像，而不是将其绘制为 canvas。现在一切正常。

http://jsfiddle.net/vm47p2sk/8/

<canvas id="myCanvas"></canvas>
<a id = "green" href="#">On focus</a>
<a id = "transparent" href="#">On focus out</a>



 $('#myCanvas').css("background-image", "url(https://www.webkit.org/blog-files/acid3-100.png)");
                    var canvas = document.getElementById('myCanvas');
var context  = canvas.getContext('2d');
   context.strokeStyle = "#009900";
        context.lineWidth = 3;
        context.strokeRect (5, 5, 100, 100);

$('#green').click(function (){
        context.clearRect (8, 8, 94, 94);  
        context.fillStyle = "rgba(0,255,0,0.1)";
        context.fillRect (8, 8, 94, 94);  
});

$('#transparent').click(function (){
        context.clearRect (8, 8, 94, 94); 
        context.fillStyle = "rgba(255, 255, 255, 0.1)";
        context.fillRect (8, 8, 94, 94);  
});

更改 canvas 填充样式而不与之前的颜色重叠

Change the canvas fillstyle without overlapping with previous color

javascript

html5-canvas