javascript - 如何解决self.context.anim不是ionic 2中的函数错误？

我正在使用Html5 Canvas在ionic 2和angular 2中创建命运之轮，动画效果很好，但是我想当我单击按钮时它应该开始动画。但是当我在按钮上调用功能时


  TypeError：self.context.anim不是函数


这是我的home.ts页面

import { Component, ViewChild } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    @ViewChild('layout') canvasRef;
    ngAfterViewInit() {
        let canvas = this.canvasRef.nativeElement;
        let context = canvas.getContext('2d');
        canvas.width = 300;
        canvas.height = 300;
        function rand(min, max) {
            return Math.random() * (max - min) + min;
        }
        var color = ['#fbc', '#f88', '#fbc', '#f88', '#fbc', '#f88', "#fbc", "#f67"];
        var label = ['10', '200', '50', '100', '5', '500', '0', "jPOT"];
        var slices = color.length;
        var sliceDeg = 360 / slices;
        var deg = rand(0, 360);
        var speed = 0;
        var slowDownRand = 0;
        var ctx = context;
        var width = canvas.width; // size
        var center = width / 2;      // center
        var isStopped = false;
        var lock = false;

        function deg2rad(deg) {
            return deg * Math.PI / 180;
        }

        function drawSlice(deg, color) {
            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.moveTo(center, center);
            ctx.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg));
            ctx.lineTo(center, center);
            ctx.fill();
        }

        function drawText(deg, text) {
            ctx.save();
            ctx.translate(center, center);
            ctx.rotate(deg2rad(deg));
            ctx.textAlign = "right";
            ctx.fillStyle = "#fff";
            ctx.font = 'bold 30px sans-serif';
            ctx.fillText(text, 130, 10);
            ctx.restore();
        }

        function drawImg() {
            ctx.clearRect(0, 0, width, width);
            for (var i = 0; i < slices; i++) {
                drawSlice(deg, color[i]);
                drawText(deg + sliceDeg / 2, label[i]);
                deg += sliceDeg;
            }
        }



        //document.getElementById("spin").addEventListener("mousedown", function () {
        //    isStopped = true;
        //}, false);

        drawImg();
        function anim () {
                deg += speed;
                deg %= 360;
                // Increment speed
                if (!isStopped && speed < 3) {
                    speed = speed + 1 * 8;
                }
                // Decrement Speed
                if (isStopped) {
                    if (!lock) {
                        lock = true;
                        slowDownRand = rand(0.994, 0.998);
                    }
                    speed = speed > 0.2 ? speed *= slowDownRand : 0;
                }
                // Stopped!
                if (lock && !speed) {
                    var ai = Math.floor(((360 - deg - 90) % 360) / sliceDeg); // deg 2 Array Index
                    ai = (slices + ai) % slices; // Fix negative index
                    return alert("You got:\n" + label[ai]); // Get Array Item from end Degree
                }

                drawImg();
                window.requestAnimationFrame(anim);
            } ;
            //anim();

    }

  constructor(public navCtrl: NavController) {
  }

  onLink(url: string) {
      window.open(url);
  }
}

这是我的home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content class="home" padding>
    <canvas #layout></canvas>
    <button (click)="anim(animation)">
        Button Item
    </button>
</ion-content>

请帮帮我。提前致谢。

最佳答案

为不在anim内的类设置ngAfterViewInit()函数。

像这样：

export class HomePage {
    @ViewChild('layout') canvasRef;
    ngAfterViewInit() {
     //...
    }
//define as class function
function anim () {
                deg += speed;
                deg %= 360;
                // Increment speed
                if (!isStopped && speed < 3) {
                    speed = speed + 1 * 8;
                }
                // Decrement Speed
                if (isStopped) {
                    if (!lock) {
                        lock = true;
                        slowDownRand = rand(0.994, 0.998);
                    }
                    speed = speed > 0.2 ? speed *= slowDownRand : 0;
                }
                // Stopped!
                if (lock && !speed) {
                    var ai = Math.floor(((360 - deg - 90) % 360) / sliceDeg); // deg 2 Array Index
                    ai = (slices + ai) % slices; // Fix negative index
                    return alert("You got:\n" + label[ai]); // Get Array Item from end Degree
                }

                drawImg();
                window.requestAnimationFrame(this.anim.bind(this));
            }
 }//end of class

关于javascript - 如何解决self.context.anim不是ionic 2中的函数错误？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43277892/