Question

我正在尝试使用createJS库动画弧，但我总是有这样的错误：

未捕获的TypeError： context.graphics.clearRect 不是函数

和

未捕获的TypeError： context.graphics.beginPath 不是函数

这是什么意思？请帮帮我

<!DOCTYPE html>
<html>
<head>
<style>
 body {
   background: #f1ecec;
}
 canvas {background-color: aliceblue;}
    </style>
        <script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>

</head>
<body>

<canvas id="myCanvas" width="500" height="500"></canvas>

<script>

var canvas = document.getElementById('myCanvas');
var stage = new createjs.Stage(canvas);

var context = new createjs.Shape();
var x = 250;
var y = 250;
var radius = 75;
var endPercent = 25 * Math.PI;
var curPerc = Math.PI / 2;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;



context.lineWidth = 10;
context.strokeStyle = '#ad2323';
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 10;
context.shadowColor = '#656565';


function animate(current) {
 context.graphics.clearRect(0, 0, canvas.width, canvas.height);
 context.graphics.beginPath();
 context.graphics.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
context.graphics.stroke();
 curPerc++;
 if (curPerc < endPercent) {
     requestAnimationFrame(function () {
         animate(curPerc / 100)
     });
   }
 }
animate();
</script> 

</body>
</html>

Answer 1

您正在调用Graphics API和Context2D API的组合，并且您正尝试在Shape实例及其Graphics对象上执行此操作。您还没有将Shape添加到舞台上，并且您没有在任何地方调用stage.update。

我建议您先看一些简单的绘图示例来开始。例如（全部在GitHub仓库中）：

教程/入门
实例/ Graphics_simple.html
实例/ APITest.html

然后，查看文档以获取更多信息： http://createjs.com/docs/easeljs/classes/Graphics.html

Answer 2

您好像没有按预期使用createjs库

以下是我将如何处理动画的动画。我创建一个形状，添加一个＆＃34; deg＆＃34;将它添加到补间并使用createjs.Tween＆＃34; s＆＃34;更改＆＃34;基于deg属性清除和绘制新弧的事件

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

        var canvas = document.getElementById('myCanvas');
        var stage = new createjs.Stage(canvas);

        var s = new createjs.Shape();
        s.x = s.y = 50;
        stage.addChild(s);

        var arcSize = 20;
        s.deg = 0;
        s.tween = new createjs.Tween.get(s, { override: true })
            .to({deg: 360 }, 1000, createjs.Ease.quartOut)
            .on("change", function () { 
                   this.graphics.clear().beginFill("red").moveTo(0, 0).arc(0, 0, arcSize, degreesToRadians(0), degreesToRadians(this.deg)); 
            }, s); // second param is scope for the function


        createjs.Ticker.addEventListener("tick", function(){
            stage.update();
        });

使用createJS创建弧形动画

2 个答案: