jquery - 如何旋转 HTML5 Canvas 的背景图像并使用 slider 放大和缩小？

Question

我是编码初学者。我想做这些事情:

1. 创建 Canvas 。
2. 放一些背景图片。请注意，我只想要背景图片。我不想使用“drawImage(image, x, y)”将图像保留在前景中。
3. 保留一个可用于放大和缩小背景图像的 slider 。 (这里的问题是，如果我将图像保留在背景中，我不知道如何捕捉它，以便我可以重新调整它的大小)。
4. 保留两个按钮。第一个按钮向左旋转图像，第二个按钮向右旋转图像。

我只想使用 HTML5、CSS3 和 jQuery 来完成这些事情。

如果有人能向我解释一些初学者容易理解的内容，我将不胜感激。如果可能，请详细解释代码。

谢谢。

这是我试过的代码:

    <div class="slider" style="width:500px; height:10px;"></div>
        <br />

        <div id="div_buttons">
            <table border="0">
                <tr>
                    <td>
                        <input type="button" id="rotateLeft" align = "left" value="Rotate Left" />
                    </td>

                    <td>
                        <input type="button" id="rotateRight" align = "left" value="Rotate Right" />
                    </td>
                </tr>
            </table>
        </div>

    <!--HERE IS THE STYLE TAG... -->
    <style type="text/css">
        img
        {
            opacity: 0.5;
        }

        .canvas
        {
            background: url('script.jpg');
            opacity: 0.5;
        }
    </style>

    <!--HERE IS THE JAVASCRIPT INSIDE <SCRIPT> TAG... -->
    <script type="text/javascript">
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext('2d');
        var globalElement_width;
        var globalElement_height;

        $(document).ready
        (function() {
            $img = $('.canvas img');
                globalElement_width = $img.width();
                globalElement_height = $img.height();

                $(".slider").slider
            ({
                        step: 1,
                        min: 10,
                        max: 100,
                        value: 0,
                        slide: function(event, ui)
                            {
                                resize_img(ui.value);
                            }
                });

                //$('.canvas img').draggable();

                $("#rotateLeft").click(function() { 
                    $('canvas').css({
                                "transform":"rotate(-90deg)"
                                });
                    }
                ) //addClass("left")

                $("#rotateRight").click(function() {

                    $('canvas').css({
                                "transform":"rotate(0deg)"
                                });
                    }
                )
            });

            function resize_img(val) 
        {
            var width = globalElement_width;
            var height = globalElement_height;
            var zoom_percen = (height * 1); // Maximum zoom 50%
            var ASPECT = 10;//zoom_percen / 30;
            var zoom_value = val / 1;
            var size = width + ASPECT * zoom_value;
            var d = ASPECT*zoom_value/10;          

            $img = $('.canvas img');
            $img.stop(true).animate({
            marginTop: -d,
            marginLeft: -d,
            width: size,
            height: size
            }, 250);
        }

    </script>


</body>

Answer 1

这是我自己问题的答案。该代码运行良好。仅在旋转图像和缩放时遇到问题。

代码如下:

        <div id="div_buttons" style="position: absolute; top: 580px;">
            <table border="0">
                <tr>
                    <td>
                        <input type="button" id="rotateLeft" align = "left" value="Rotate Left" />
                    </td>

                    <td>
                        <input type="button" id="rotateRight" align = "left" value="Rotate Right" />
                    </td>
                </tr>
            </table>
        </div>

        <div id="result" style="position: absolute; top: 520px;" >Here is the div</div>

    <!--HERE IS THE STYLE TAG... -->
    <style type="text/css">
        img
        {
            opacity: 0.5;
        }

        .canvas
        {
            background: url('sky.jpg') no-repeat 30% 30%;
            height: 500px;
            width: 500px;
            repeat: false;
            opacity: 0.5;
            repeat: none;
        }
    </style>

    <!--HERE IS THE JAVASCRIPT INSIDE <SCRIPT> TAG... -->
    <script type="text/javascript">
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext('2d');
        var globalElement_width;
        var globalElement_height;
        var newangle = 0;
        var operation = "";

        $(document).ready
        (function() {
            $img = $('.canvas');
                globalElement_width = $img.width();
                globalElement_height = $img.height();

                $(".slider").slider
            ({
                        step: 1,
                        min: 1,
                        max: 100,
                        value: 0,
                        slide: function(event, ui)
                            {
                                resize_img(ui.value);
                            }
                });



                //THIS IS THE CODE THAT MAKES CANVAS BACKGROUND ROTATE LEFT.
                $("#rotateLeft").click(function() { 
                    $('.canvas').css({
                        "transform":"rotate(-90deg)"
                                });
                    }
                ) //addClass("left")

                //THIS IS THE CODE THAT MAKES CANVAS BACKGROUND ROTATE RIGHT.
                $("#rotateRight").click(function() {
                    $('.canvas').css({
                            "transform":"rotate(0deg)"
                                });
                    }
                )



                //TRYING TO MAKE CANVAS ANNOTABLE.

                //ALL MOUSE LISTENERS ARE SET HERE.
                canvas.onmousedown = function (e) //WHEN MOUSE IS CLICKED
                {
                    canvas.isDrawing = true;

                }

                canvas.onmouseup = function (e) //WHEN MOUSE CLICK IS RELEASED
                {
                    canvas.isDrawing = false;

                }

                canvas.onmousemove = function(e)
                {

                    var res = document.getElementById('result');
                    res.innerHTML = e.pageX + ", " + e.pageY;

                    if (!canvas.isDrawing) {
                       return;
                    }

                    var x = e.pageX - this.offsetLeft;
                    var y = e.pageY - this.offsetTop;
                    var radius = 5; // or whatever
                    var fillColor = '#ff0000';
                    context.fillCircle(x, y, radius, fillColor);
                }

                context.fillCircle = function (x, y, radius, fillColor)
                {
                    //alert("fillCircle is here...");
                    this.fillStyle = fillColor;
                    this.beginPath();
                    this.moveTo(x, y);
                    this.arc(x, y, radius, 0, Math.PI * 2, false);
                    this.fill();
                }
            });

            function resize_img(val) 
        {
            context.save();
            var width = globalElement_width;
            var height = globalElement_height;
            var zoom_percen = (height * 1); // Maximum zoom 50%
            var ASPECT = 10;//zoom_percen / 30;
            var zoom_value = val / .5;
            var size = width + ASPECT * zoom_value;
            var d = ASPECT*zoom_value/10;          

            $img = $('.canvas');
            $img.stop(true).animate({
            marginTop: -d,
            marginLeft: -d,
            width: size,
            height: size
            }, 250);
            context.restore();

        }
    </script>


</body>