Ładowanie obrazu na płótno za pomocą javaScript

Question

Feb 07, 2013, 06:51 PM

Ładowanie obrazu na płótno za pomocą javaScript

Witam wszystkich obecnie testujących za pomocą elementu canvas, aby narysować wszystkie tła (dodam efekty później do tych obrazów później i czy nie używam css do załadowania obrazów), który powiedział, że obecnie mam trudności z ładowaniem obrazu na płótnie. oto kod:

<html>

<head>

    <title>Canvas image testing</title>

    <script type="text/javascript">
        function Test1() {
            var ctx = document.getElementById('canvas');
            if (canvas.getContext) {

                var ctx = canvas.getContext('2d');

                //Loading of the home test image - img1
                var img1 = new Image();
                img1.src = 'img/Home.jpg';

                //drawing of the test image - img1
                img1.onload = function () {
                    //draw background image
                    ctx.drawimage(img1, 0, 0);
                    //draw a box over the top
                    ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
                    ctx.fillRect(0, 0, 500, 500);

                };
            }

        }


    </script>

    <style type="text/css">
        canvas { border: 2px solid black; width: 100%; height: 98%; }
    </style>
</head>

<body onload="Test1();">

    <canvas id="canvas" width="1280" height="720"></canvas>


</body>

Myślę, że nie ładuję poprawnie obrazu, ale nie jestem pewien.