與createJS弧動畫

我試圖用createJS庫動畫的弧線，但我一直有這樣一個錯誤：與createJS弧動畫

Uncaught TypeError: context.graphics.clearRect is not a function

和

Uncaught TypeError: context.graphics.beginPath is not a function

是什麼意思呢？請幫我

<!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>

來源

2015-09-14 Alex

你調用圖形API和Context2D API的組合，和你想在兩個你的形狀實例及其圖形對象這樣做。您還沒有將該形狀添加到舞臺，並且您不在任何地方撥打stage.update。

我建議看看一些簡單的繪圖示例來開始。例如（全部在GitHub庫）：

教程/入門
例子/ Graphics_simple.html
例子/ APITest.html

然後，檢查出的文檔的更多info： http://createjs.com/docs/easeljs/classes/Graphics.html

來源

2015-09-14 17:04:26 gskinner

它看起來像你沒有按預期使用createjs庫

下面是我將如何處理動畫弧。我創建一個形狀，在其上添加一個「deg」屬性以補間並使用createjs.Tween的「更改」事件清除並繪製基於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(); 
     });

來源

2017-01-23 10:02:03

與createJS弧動畫

回答

相關問題