使用canvas完成幀動畫（方向鍵控制行走的小人）

阿新 • • 發佈：2020-12-28

技術標籤：canvas html

根據此精靈圖設定動圖
在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body 
 {
      margin: 0;
      padding: 0;
    }

    canvas {
      display: block;
      margin: 100px auto;
      position: relative;
    }
  </style>
</head>

<body> <canvas width="600" height="400" style="border: 1px solid gray;"></canvas>
  <script 
>

    var Persion = function (ctx) {
      this.ctx = ctx || document.querySelector('canvas').getContext('2d');
      this.src = "../img/03.png";
      //獲取畫布大小
      this.canvasWidth = this.ctx.canvas.width;
      this.canvasHeight = this.ctx.canvas.height;
      // 行走引數
      this.stepSzie = 
 10;
      // 0 前 1 左 2 右 3 後
      this.direction = 0;
      this.stepX = 0;
      this.stepY = 0;

      this.init();

    }
    Persion.prototype.init = function () {
      var that = this;
        /*1.載入圖片*/
        this.loadImage(function (image) {
            /*圖片的大小*/
            that.imageWidth = image.width;
            that.imageHeight = image.height;
            /*人物的大小*/
            that.personWidth = that.imageWidth / 4;
            that.personHeight = that.imageHeight / 4;
            /*繪製圖片的起點*/
            that.x0 = that.canvasWidth / 2 - that.personWidth / 2;
            that.y0 = that.canvasHeight / 2 - that.personHeight / 2;
            /*2.預設繪製在中心位置正面朝外*/
            that.ctx.drawImage(image,
                0,0,
                that.personWidth,that.personHeight,
                that.x0,that.y0,
                that.personWidth,that.personHeight);
        // 通過方向鍵控制人物行走
        that.index = 0;
        document.onkeydown = function (e) {
          if (e.keyCode == 40) {
            that.direction = 0;
            that.stepY++;
            that.drawImage(image);
            /*前*/
          } else if (e.keyCode == 37) {
            that.direction = 1;
            that.stepX--;
            that.drawImage(image);
            /*左*/
          } else if (e.keyCode == 39) {
            that.direction = 2;
            that.stepX++;
            that.drawImage(image);
            /*右*/
          } else if (e.keyCode == 38) {
            that.direction = 3;
            that.stepY--;
            that.drawImage(image);
            /*後*/
          }
        }
      })
    }
    Persion.prototype.loadImage = function (callback) {
      var image = new Image();
      image.onload = function () {
        callback && callback(image);
      }
      image.src = this.src;
    }
    Persion.prototype.drawImage = function (image) {
      this.index++;
      // 清除畫布
      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
      // 定位到x 索引  
      // y方向
      this.ctx.drawImage(image,
        this.index * this.personWidth, this.direction * this.personHeight,
        this.personWidth, this.personHeight,
        this.x0 + this.stepX * this.stepSzie, this.y0 + this.stepY * this.stepSzie,
        this.personWidth, this.personHeight);
      /*如果索引超出了 變成0*/
      if (this.index >= 3) {
        this.index = 0;
      }
    }
    new Persion()
  </script>

</body>

</html>

使用canvas完成幀動畫（方向鍵控制行走的小人）

技術標籤：canvashtml 根據此精靈圖設定動圖 <!DOCTYPE html> <html lang="en">

JS實現可以用鍵盤方向鍵控制的動畫

用JS寫一個可以用鍵盤方向鍵控制的動畫：效果如下：好了，程式碼如下： <!DOCTYPE html>

css3關鍵幀動畫-（小蠟燭）

技術標籤：css3 css3關鍵幀動畫效果圖（蠟燭點火）實現來回迴圈 →_→→_→→_→

C語言 ACLLib鍵盤方向鍵控制圖形移動以及滑鼠控制圖形移動

目錄滑鼠的引數鍵盤的引數鍵盤方向鍵控制圖形移動滑鼠控制圖形移動滑鼠的引數

Mybatis原始碼解讀：executor包（主鍵自增功能）

技術標籤：mybaits原始碼mybatis原始碼歡迎關注本人公眾號： executor執行器包作為mybatis的核心將其他各個包凝聚在一起，會呼叫配置解析包解析出配置資訊，會依賴基礎包提供的基礎功能，最終executor包將所

MySQL（三）資料管理（外來鍵及DML語言）

MySQL資料管理一、外來鍵 -- 建立一個年級表 CREATE TABLE `grade`( `gradeid` INT (10) NOT NULL AUTO_INCREMENT COMMENT \'年紀id\',

Moonlight提高幀數（膝上型電腦適用）

膝上型電腦需要開啟獨顯直連才可提高幀數比如我是3060的筆記本開直連前20-30幀直連後70-120幀左右（前提是你的顯示裝置需要開啟和支援這個幀數，去軟體設定就可以開啟）

Python 利用郵件系統完成遠端控制電腦的實現（關機、重啟等）

0. 我們如何通過郵件系統完成遠端控制電腦（關機、重啟等）？實現思路：需要有兩個郵箱：接收指令郵箱（A）傳送指令郵箱（B）

Android 開發 VectorDrawable 向量圖（八）animation-list幀動畫配合向量圖實現動畫

前言　　只是向量圖的一個使用小技巧，關鍵點是<aapt:attr name=\"android:drawable\"> 屬性，它其實是代替<item 裡的android:drawable屬性。理解它，你可以舉一反三使用到更多的需要實現動畫，按下效果，

SurfaceView使用canvas播放序列幀動畫

技術標籤：AndroidandroidcanvasbitmapSurfaceViewframe animtion Android SurfaceView使用canvas播放序列幀動畫

Qt 獲取鍵盤按鍵（keyEvent獲取不到方向鍵及空格鍵）

需求：獲取方向鍵然後操作。問題：qt 類使用void keyPressEvent(QKeyEvent *event);判斷方向鍵時出現獲取不到按鍵事件

關於如何使用css3中的steps完成圖片幀動畫

技術標籤：CSScss3動畫圖片幀動畫前端中的動畫效果可以有很多種方法完成，對於一些簡單的顏色、大小、長度、位置變化都可以通過transition輕鬆實現，對於一些複雜的、不規則的動畫就要藉助圖片來完成了。

TimePicker控制元件、幀動畫、補間動畫

1.TimePicker控制元件最近感覺每個開發平臺的控制元件基本都差不多，在Android中控制元件的事件和.net控制元件直接寫事件有一定的區別，net事件可以直接介面進行事件的繫結哈。不過在Silverlight中，如果用MVVM設計

解決Python命令列下退格,刪除,方向鍵亂碼(親測有效)

一、出現原因：readline模組沒有安裝二、解決方式： # 安裝readline模組 yum -y install readline-devel

如何利用組策略替代Windows的UAC（使用者賬戶控制）？

如何利用組策略替代Windows的UAC（使用者賬戶控制）？故障現象：如何利用組策略替換Windows的UAC（使用者帳戶控制）？解決方案：

win10系統把wasd變成上下左右方向鍵的方法

W，A，S和D可用於與四個箭頭鍵相同的功能，愛玩遊戲的玩友而言，ASDW與上下左右鍵至關重要。為了能夠熟練掌握，那麼win10系統下wasd如何變成上下左右方向鍵？初學者剛剛接觸不太熟悉，其實可以進入登錄檔進行設定，本

Threejs實現滴滴官網首頁地球動畫（轉載）

先看示例：http://39.106.166.212:8080/webgl/t4（由於是寫dome的一個專案，內容較多沒做優化，第一次載入會會比較慢，需多等待幾秒）

JavaScript動畫基礎：canvas繪製簡單動畫

動畫是將靜止的畫面變為動態的藝術．實現由靜止到動態，主要是靠人眼的視覺殘留效應。視覺殘留也叫視覺暫留現象，物體在快速運動時, 當人眼所看到的影像消失後，人眼仍能繼續保留其影像0.1~0.4秒左右的影象，這種現象

linux 簡單記錄9 --服務的訪問控制列表（ssh，scp，screen）

服務的訪問控制列表 [root@localhost ~]# cat /etc/hosts.allow # # hosts.allowThis file contains access rules which are used to

Django---drf,JWT補充、基於就角色的許可權控制（django內建auth體系）

目錄昨日回顧今日內容1 jwt1.1 控制使用者登入後才能訪問，和不登入就能訪問1.2 控制登入介面返回的資料格式1.3 自定義基於jwt的許可權類1.4 手動簽發token（多方式登入）1.5 jwt的配置引數2 基於角色的許可權控制（

使用canvas完成幀動畫（方向鍵控制行走的小人）

相關推薦