在學校項目的HTML5畫布中構建表情

我正在嘗試爲學校項目構建動畫表情。首先，畫布給我的問題甚至從一個帶有黑色輪廓的黃色圓圈開始。我還沒有從臉部或任何動畫開始。我已經搜索了互聯網以及本網站的建議，建立一個圓弧的圓圈，但尚未成功。這是我到目前爲止：在學校項目的HTML5畫布中構建表情

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <script src=http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ></script> 
</head> 
<body> 
    <canvas width="1200" height="900" id="myCanvas"> 
     Your browser does not support canvas. 
    </canvas> 
    <script> 
     var myCanvas = document.getElementById("myCanvas"); 
     var ctx = myCanvas.getContext("2d"); 

     ctx.beginpath(); 
     ctx.strokeStyle = "000000"; 
     ctx.fillstyle = "FFFF00"; 
     ctx.lineWidth = 5; 
     ctx.arc(600, 450, 300, 0, Math.Pi * 2, true); 
     ctx.closePath(); 
     ctx.fill(); 
    </script> 
</body> 
</html>

我已採取此代碼和添加和減去行。我改變了順序，甚至把代碼放在程序的不同部分，特別是頭部的畫布腳本。沒有任何工作。我究竟做錯了什麼？有沒有人有這方面的建議，表情符號或動畫？

來源

2016-04-04 phoenixCoder

'Math.PI'不'Math.Pi' –

確保使用您選擇的瀏覽器的開發人員工具來觀察控制檯在處理項目時的錯誤，以便您看到消息：「未捕獲的TypeError：ctx.beginpath不是函數」 –

這是很好的建議，謝謝。我不知道這是Math.PI – phoenixCoder

爲了增加NOBrien的回答，你也想設置fillStyle ，而不是fillstyle。

這一點對我來說是學習經驗的很好，所以我在一堆東西有點扔它：

https://jsfiddle.net/gregborbonus/o67bdr0m/

來源

2016-04-04 02:51:58

啊，很好！ – NOBrien

將此圖像製作成動畫效果的最佳方法是什麼？使用框架動畫？ – phoenixCoder

是的，我只是玩了我所做的：https：//jsfiddle.net/o67bdr0m/1/ –

你有兩個錯別字 - 它應該是ctx.beginPath（）（資本P）和Math.PI（大寫I）：

var myCanvas = document.getElementById("myCanvas"); 
var ctx = myCanvas.getContext("2d"); 

ctx.beginPath(); 
ctx.strokeStyle = "000000"; 
ctx.fillStyle = "FFFF00"; 
ctx.lineWidth = 5; 
ctx.arc(600, 450, 300, 0, Math.PI * 2, true); 
ctx.closePath(); 
ctx.fill();

來源

2016-04-04 02:36:18 NOBrien

謝謝你的工作。我仍然遇到的另一個問題是填充樣式最終是默認的，或者是黑色的，而我將填充編碼爲黃色。我注意到語法應該是fillStyle而不是fillstyle，但是這不能解決問題。 – phoenixCoder

在學校項目的HTML5畫布中構建表情

回答

相關問題