Question

我绘制杂色画布，然后单击重绘并绘制黑色矩形。但矩形不会删除！我做错了什么？演示： http://jsfiddle.net/82nnJ/

    function draw_palette() {
        $c = document.getElementById('palette');
        $ctx = $c.getContext('2d');
        var size = 256;
        $ctx.clearRect(0, 0, size, size); //
        var r = 255;
        var a = 255;
        for (var g = 0; g < size; g++) {
            for (var b = 0; b < size; b++) {
                $ctx.fillStyle = "rgba(" + r + ", " + g + ", " + b + ", " + (a/255) + ")";
                $ctx.fillRect(g, b, 1, 1);
            }
        }
    }
    jQuery(document).ready(function() {

        draw_palette();

        $('#palette').click(function(e) {
            draw_palette();
            var x = e.pageX - $(this).position().left;
            var y = e.pageY - $(this).position().top;
            var radius = 5;
            $ctx.rect(x-radius, y-radius, 2*radius+1, 2*radius+1);
            $ctx.strokeStyle = 'black';
            $ctx.stroke();
        });
    });

Answer 1

应该有beginPath和closePath方法。

$ctx.beginPath();
$ctx.rect(x-radius, y-radius, 2*radius+1, 2*radius+1);
$ctx.strokeStyle = 'black';
$ctx.stroke();
$ctx.closePath();

Answer 2

我刚刚解决了类似的问题。我有一个在Web端使用JavaScript编程的图表，以及一个将数据传输到该图表的服务器。使用websocket实时更新图表。

基本上在onmessage事件中，使用DOM销毁并构造了Canvas对象。在销毁前一个对象的情况下，这可以确保它正确地重画。

这就是我所做的...

    var c = document.getElementsByName("myCanvas")[0];

    if (c != null)
    {
        c.remove();
    }

    var c = document.createElement("canvas");
    c.setAttribute("name", "myCanvas");
    c.setAttribute("width", 900);
    c.setAttribute("height", 600);
    c.setAttribute("style", "border:1px solid #d3d3d3");

    var ctx = c.getContext("2d");



    document.body.append(c);

html画布不会重绘

2 个答案: