0

我绘制杂色画布并单击重绘并绘制黑色矩形。但矩形不会删除！我做错了什么？演示：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();
        });
    });
4

2 回答 2

1

应该有 beginPath 和 closePath 方法。

$ctx.beginPath();
$ctx.rect(x-radius, y-radius, 2*radius+1, 2*radius+1);
$ctx.strokeStyle = 'black';
$ctx.stroke();
$ctx.closePath();
于 2013-08-09T15:04:24.433 回答
0

我刚刚解决了一个类似的问题。我有一个在 web 端用 javascript 编程的图表和一个将数据传输到图表的服务器。使用 websockets 实时更新图表。

基本上在 onmessage 事件中，Canvas 对象被销毁并使用 DOM 构造。随着前一个对象被破坏，这可以确保它正确地重新绘制。

这就是我所做的...

    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);
于 2020-02-26T18:27:52.107 回答