学校プロジェクトの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' –

選択したブラウザの開発ツールを使用して、プロジェクトの作業中にコンソールでエラーが発生したことを確認してください。「未知のタイプエラー：ctx.beginpathは関数ではありません」 –

ありがとうございました。私はそれが数学であることを知らなかった.PI – phoenixCoder

、あなたもfillStyleを設定したいです塗りつぶしスタイルではありません。

これは、同様に私のための学習経験のビットだったので、私は一種のそれに原料の束で投げた：

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

出典

2016-04-04 02:51:58

ああ、いいキャッチ！ – NOBrien

この画像をアニメ化してウィンクさせるには、どのような方法が最適ですか？フレームアニメーションを使用しますか？ – phoenixCoder

うん、私はちょうど私が作ったもので遊んだ：https://jsfiddle.net/o67bdr0m/1/ –

次の2つのタイプミスを持っている - ctx.beginPath（）（資本P）とにMath.PI（資本I）のようになります。NOBrienの答えに追加するには

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

ありがとうございました。私がまだ遭遇しているもう1つの問題は、塗りつぶしスタイルがデフォルトまたは黒色になり、塗りつぶしが黄色になるようにコーディングすることです。私は文法がfillstyleの代わりにfillStyleでなければならないことに気がついたが、それは問題を解決しない。 – phoenixCoder

学校プロジェクトのHTML5キャンバスでの絵文字の作成

答えて

関連する問題