2017-11-11 8 views
1

私はHTML5のキャンバスで遊んでいます、私の本ははキャンバスarcTo()メソッド

最新のブラウザはarcToメソッドをサポートしており、それが アーク()関数を削除する機能を持っていると述べています。

私の質問はどうですか?

はまた、私は誰かがここで

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <canvas id="canvas" width="500" height="500" ></canvas> 
 
    
 
    <script> 
 
    var canvas = document.getElementById("canvas"); 
 

 
    var context = canvas.getContext('2d'); 
 

 
     var drawScreen = function(){ 
 
     \t context.moveTo(0,0); 
 
     \t context.lineTo(100,200); \t 
 
     \t context.arcTo(350,350,100,100,20); 
 
     \t context.stroke(); 
 
     } 
 
     
 
     drawScreen(); 
 
    </script> 
 
    </body> 
 

 
</html>

+0

ここに[doc](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo)があります。 – Durga

答えて

1

を説明することができますJavaScriptコードは、あなたが作品を掲載方法を説明するいくつかの擬似コードでそのがこのようにして形成されたばかりなぜarcTo、この例で混乱しています:

1) Get the canvas, and store it to variable 'canvas' 
2) Get the 2d context of 'canvas', and store it to variable 'context' 

3) Initialize a function, 'drawScreen', that takes no arguments, but runs the following instructions: 
    a) Move the pen to (0,0) on the canvas. 
    b) Draw a line from the pen's current position to (100, 100) 
    c) Draw an arc with a tangent line that passes through (350, 350) and the current pen position, and another tangent line that passes through (350, 350) and (100, 100), around a circle with radius 20. 
    d) Push the updated canvas to the screen. 
4) Run the function 'drawScreen' 

信じるかどうかは、またはまったく同じことをするための他のコマンドの組み合わせarcがありますが、もっと多くの作業がありますが、このオンラインの例は数多くあります。