Question

当您查看此关键帧动画时，您可以看到动态图像和更多调整。运动图像是其中一个图像的副本，也是在画布上。

您是否知道创建相同动画的方法，但是对于画布上的图像？是否可以在画布上放置图像，然后将图像放大，例如，然后使用脚本模式移动它，并仅在画布区域中显示运动图像的当前部分？

    <title>animate canvas image</title> 
    <h1 style="color: rgb(235, 235, 235);">1280x720 Canvas</h1>
    
    <body style = "background-color:rgb(42, 42, 42)">
    <form id='form1' style="position:relative">
    <div class="page-header"></div> 
    <div style="position:absolute; top:0px; left:0px; -user-select: none;"></div>
    
    <!--css image animation setup-->
    <style type="text/css">
    
    .page-header:after {
      animation: move 10s steps(12) infinite;
      background-image: url('https://i.imgur.com/un6UnCN.png');
      content: "";
      z-index: 100;
      height: 300%;
      left: -50%;
      opacity: 0.2;
      position: fixed;
      top: -110%;
      width: 300%;
    }
    
    @keyframes move {
      0%, 50% { transform:translate(0, 0) }
      10% { transform:translate(0%, 50%) }
      20% { transform:translate(50%, 0%) }
      30% { transform:translate(0%, 50%) }
      40% { transform:translate(50%, 0%) }
      50% { transform:translate(0%, 50%) }
      60% { transform:translate(50%, 0%) }
      70% { transform:translate(0%, 50%) }
      80% { transform:translate(50%, 0%) }
      90% { transform:translate(0%, 50%) }
    }
    </style>

    <style type="text/css">
        #background {display: none;}
        h1 {text-align:center; font-size:28pt; padding:50px 0; font-family:monospace;}
    </style>
    
    <div id='cnv' style="position:absolute; top:0px; left:300px"> <!--canvas position-->
        <canvas id='canvas' width='1280' height='720'> </canvas> <!--canvas size-->
        </div>
    
    <script> //canvas
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "cyan";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    </script>

    <script type="text/javascript" src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
    <img src = 'https://i.imgur.com/QZrUAVn.jpg' id="background" /> <!--Location background image-->
    
    <script> //background image
        $(document).ready(function() {
        var d_canvas = document.getElementById('canvas');
        var cxt = d_canvas.getContext('2d');
        var background = document.getElementById('background');
        cxt.drawImage(background, 0, 0);
    //foreground image
        var image = new Image();
        image.src = 'https://i.imgur.com/un6UnCN.png'; //Location foreground image
        image.onload = function () {
            var cxt = d_canvas.getContext('2d');
            cxt.globalAlpha = 0.6;
            cxt.drawImage(image, canvas.width / 2 - image.width / 2, canvas.height / 2 - image.height / 2);
        }; }); </script>

像这样操纵/动画画布元素？

0 个答案: