javascript - 内联 CSS 与头部样式

问题描述

这让我很困惑。我试图让图像在画布中移动。如果我把样式放在头上，它就不能正常工作。在线可以。我见过类似的问题，但我无法推断我做错了什么。我正在尝试解决代码中的其他“问题”，但无法解决这个问题。提前感谢您的帮助。

有效的代码：

<html>
  <head>
    <title>Bounce 1</title>
    <style>
            #ballWindow {
                border-style:solid;
                border-color:red;
                border-width: 1px;
                background-color: black;
            }
    </style>
  </head>
  <body onload="moveBall()" >
    <canvas id="ballWindow" width="960" height="640">
    </canvas>
    <script>
    var ctx = null;
        var x_icon = 0;
        var y_icon = 0;
        var stepX = 1;
        var stepY = 1;
        var size_x = 30;
        var size_y = 30;
        var canvas_size_x = 960;
        var canvas_size_y = 640;
        var anim_img = null;
              
        function moveBall() {
            var canvas = document.getElementById("ballWindow");
            ctx = canvas.getContext("2d");
            anim_img = new Image(size_x, size_y);
            anim_img.onload = function() { setInterval('myAnimation()', 10); }
            anim_img.src = 'jupiter.jpg';
        }
        function myAnimation() {
                ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);
                if (x_icon < 0 || x_icon > canvas_size_x - size_x) {stepX = -stepX; }
                if (y_icon < 0 || y_icon > canvas_size_y - size_y) {stepY = -stepY; }
                x_icon += stepX;
                y_icon += stepY;
                ctx.drawImage(anim_img, x_icon, y_icon);
        }
    </script>  
  </body>
</html>

不起作用的代码（球图像太大并且超出框架）：

<html>
  <head>
    <title>Bounce 2 </title>
    <style>
            #ballWindow {
                width: 960;
                height: 640;
                border-style:solid;
                border-color:red;
                border-width: 1px;
                background-color: black;
            }
    </style>
  </head>
  <body onload="moveBall()" >
    <canvas id="ballWindow" >
    </canvas>
    <script>
    var ctx = null;
        var x_icon = 0;
        var y_icon = 0;
        var stepX = 1;
        var stepY = 1;
        var size_x = 30;
        var size_y = 30;
        var canvas_size_x = 960;
        var canvas_size_y = 640;
        var anim_img = null;
              
        function moveBall() {
            var canvas = document.getElementById("ballWindow");
            ctx = canvas.getContext("2d");
            anim_img = new Image(size_x, size_y);
            anim_img.onload = function() { setInterval('myAnimation()', 10); }
            anim_img.src = 'jupiter.jpg';
        }
        function myAnimation() {
                ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);
                if (x_icon < 0 || x_icon > canvas_size_x - size_x) {stepX = -stepX; }
                if (y_icon < 0 || y_icon > canvas_size_y - size_y) {stepY = -stepY; }
                x_icon += stepX;
                y_icon += stepY;
                ctx.drawImage(anim_img, x_icon, y_icon);
        }
    </script>  
  </body>
</html>

标签： javascripthtmlcss

javascript - 内联 CSS 与头部样式 - 获得不同的行为

问题描述

解决方案

推荐阅读