javascript - イベントでキャンバスに描かれた画像を隠したり表示したりする方法は?

Question

JSON から x 座標と y 座標を渡して Canvas に画像を描画しました。しかし、チェックボックスボタンをオンにした場合はそれらの画像を非表示にし、チェックボックスボタンをオフにした場合は表示したいです。

ヒントがあればありがたいです。

Answer 1

jquery を使用すると、画像 div の表示を非表示にすることができます。これを行う方法は次のとおりです。

$(document).ready(function () {
    $("#map_canvas").hide();
    $("#map_checkbox").click(function () {
        if ($("#map_checkbox").is(":checked")) {
            $("#map_canvas").show();
        } else if ($("#map_checkbox").not(":checked")) {
            $("#map_canvas").hide();
        }
    })
});  

JSFIDDLE デモ

注:上記のコードでは、 #map_canvasは属性 id=map_canvas を持つキャンバス div です。#map_checkboxは属性 id=#map_checkbox を持つチェックボックスです。