序文:今日、JSブックのキャンバスキャンバスを読み終えました。私はとても幸せです〜私は再び私の最愛のキャンバスです〜ouye〜
私は誰かが私に以前に青い太った男を描くように提案しているのを見ました、はい、なぜ私の子供の頃に持っていたお気に入りの青い太った男を忘れたのですか?ブルーファットマンに謝罪を表現するために、私は今日感動的なハローワールドを描きました。これも一種の改善です〜
さて、乗客のために内側に行ってください。通路をブロックしないでください、ありがとう。運転しましょう〜
文章:
今日写真を撮って、その効果を見てみましょう
今日、ファットブルーの男はこのように見えます、そして、私は彼がまだとても太っていることを見て安心しています。この世界はまだポジティブなエネルギーに満ちており、私よりも太っている人がまだいます、ハハハハ
次に、コード
HTMLパーツ
<canvas id = "mycanvas">ブラウザ〜</canvas>に移動してアップグレードします
JSパート
window.addeventlistener( "load"、function(){// canvasコンテキストvar context = document.getelementbyid( "mycanvas")。getContext( "2d"); //コンテキストが存在するかどうかを判断します。クロック//コンテキストの外側の大きな円を描く(100,100,99,0,2*math.pi、false); // context.fillstyle = "#315f9b"; context.fill(); //大円の端を描く。 (194,100)、ポイントコンテキストを計算します。Moveto(194,100); //小さな円の内側(ラウンドゴッド?)コンテキストを描きます。 appears~//Create an Image object and set its src to the blue fat man's image var image = new Image();image.src = "2.png";//Use the context method drawImage to draw the image from the point (25,25), and draw it in a rectangle with a side length of 150 context.drawImage(image,25,25,150,150);//Move the transformation matrix//After moving (100,100)新しい起源、つまり(0,0)コンテキスト(100,100); //タイムポイントコンテキスト= "#02285a"; Sutions.FillText( "12"、-5、-80); context.filltext( "6"、-4,87); context.filltext( "3"、80,1); context.filltext( "9"、-86,1); //上記の時計のダイヤルが表示されますが、時計が時計である最も重要な理由は、時間(ナンセンス)を表示できることです。次のステップはポインターを描画することです。
Nowtime関数パーツ
function nowtime(context){//日付オブジェクトを作成して現地時間var mydate = new date(); mydate.getSeconds(); //時間を説明します//現在の時間のラジアンをダイヤルvar hourarcに保存するために使用します; // 3時間は円周の出発点として3時間使用します。 (myhour-3)*math.pi/6;} // 3、6、9、12を指すと、正確に90°//ラジアンに変換された角度からの偏差があります。 9:hourarc = math.pi; break;} // drawtime関数とdrawtime(context、hourarc、60); // draw minutes //ダイヤルのダイヤルのダイヤルでRadian var minarcを使用します。 //周囲の開始点として15分を使用して、radian clockwiseを表すif(mymin <15){minarc = 2*math.pi-(15-mymin)*math.pi/30;} else {minarc =(mymin-15)*math.pi/30;} //処理分、minc:minc(mymin、sowsian、ed assion and assion and assion and asson Math.Pi*3/2; BREAK;ケース15:MINARC = 0; CASE 30:MINARC = MINARC = MINARC = MATH.PI/2; CASE 45:MINARC = MATH.PI;} //ドロータイム関数と描画タイム(コンテキスト、MINARC、80); //描画秒//現在clockwise if(mysec <15){secarc = 2*math.pi-(15-mysec)*math.pi/30;} else {secarc =(mysec-15)*math.pi/30;} //数秒の処理、角度がラジアンに変換され、特別な処理があるため、角度があるため、Mysec = secec(Mysec)があります。 Math.Pi*3/2; BREAK;ケース14:SECARC = 0; CASE 29:SECARC = MATH.PI/2; BREAK; CASE 44:SECARC = MATH.PI;} //コールドロータイム関数とドロータイム(コンテキスト、SECARC、80、 "RED");もちろん、新しいポインターは、クリアタイムを使用することができます。それでは、コンテキストを操作するときにどのように具体的にポインターを描くのでしょうか?私も知らないので、今日それを終えましょう〜
冗談です、ええ、それを簡単にしてください(私があなたを台無しにするつもりでなければなりません)
次は、合計4つのパラメーターを備えたドロータイム関数です(コンテキスト、thearc、thelength、color = "#000")。コンテキストは、一見キャンバスであるコンテキストを通して見ます。TheArcは、キャンバスを回転させたい角度であり、長さはポインターの長さを表し、色はポインターの色です。
関数描画時間(コンテキスト、thearc、theLENG、color = "#000"){//現在のキャンバス環境を保存し、復元方法と併用してキャンバスコンテキストを復元します。 (0,0)context.moveto(0,0); //(thelength、0)へのパスを描画するスタートポイント; //指定された色のコンテキストでこのパスを描画します。strokestyle= color; //パスの幅は2context.linewidth = 2;パスを見たい場合は、ストロークを使用してラインをトレースする必要があります。この行を追跡する方法は、上記で使用したいくつかの属性によって定義できます。それは終わりに近づいていますが、非常に重要なクリアタイム関数もあります。それがなければ、あなたの時計は密集した秒で占有されます。私たちは皆、集中的な恐怖症の患者の世話をする責任があります。
cleartime(context){//新しいサブパスを起動してから、以前に描いたポインターを覆う美しい青でいっぱいの円を描きます。これは、ダイヤルコンテキストをクリアすることに相当します。事故、それをもう一度召喚すると、それはあなたになります、ピカチュウ(?huh)var image = new image(); image.src = "2.png"; //この座標は、変換マトリックスを変更したため、最初にロードされた座標とは異なります。したがって、それらの座標は補完的なコンテキストである必要があります。drawimage(画像、-75、-75,150,150);}まあ、OK、それは本当にここにあります、それは食事をするために行く時間です〜親愛なるかわいいプログラマー、食べることを忘れないで