0

都市にマウスを合わせると、デンマークの地図に情報を設定しようとしています。円を描いてみましたが、地図に表示されず（上ではなく下に表示されていました）、イベントを設定できるかどうかわかりません。キャンバスを使うのは初めてです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript">
        function startCanvas() {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");

            //draw a circle
            ctx.beginPath();
            ctx.arc(75, 75, 10, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();

            var image = new Image();

            image.onload = function () {
                ctx.drawImage(image, 69, 50);
            };

            image.src = 'denmark.jpg';                 
        }
    </script>
</head>
<body onload="startCanvas()">
    <canvas id="myCanvas" width="600" height="600";">
    Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>
4

2 に答える 2

2

デレクの意味は次のとおりです。 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<script type="text/javascript">
    function startCanvas() {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        var image = new Image();

        image.onload = function () {
            ctx.drawImage(image, 69, 50);
            //draw a circle
            ctx.beginPath();
            ctx.arc(75, 75, 10, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();
        };

        image.src = 'denmark.jpg';                 
    }
</script>
</head>
<body onload="startCanvas()">
<canvas id="myCanvas" width="600" height="600";">
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>
于 2013-02-14T05:33:58.687 に答える
0

あなたが言ったように、それは終わりではありませんでした。画像を上にしたい場合は、画像を描いた後に円を塗りつぶす必要があります。これらの関数がピクセル データに対して行うこと (ピクセルの置き換え) について考えてみましょう。同じイベント内で円を描画できます。画像の onload は、drawImage 呼び出しの後に描画するだけです。

于 2013-02-14T03:56:48.523 に答える