グラフィック変換

2200 ワード




    
        
        
        <style type="text/css">
            #myCanvas {
                border: 2px solid blue;
                /*canvas */
            }
        </style>
    

    
        <canvas id="myCanvas" width="600" height="600"/>
    
    <script type="text/javascript">
        var myCanvas = document.getElementById("myCanvas");

        var context = myCanvas.getContext("2d");
        var deg = Math.PI/180;
        
        // 
        //  translate
//      context.fillRect(0,0,100,100);
//      context.translate(100,100);
//      context.fillStyle = "red";
//      context.fillRect(0,0,100,100);

        // 
//      context.fillRect(0,0,100,100);
//      context.rotate(30*deg);
//      context.fillStyle = "red";
//      context.fillRect(0,0,100,100);
        
        // 
//      context.save();
//      context.fillRect(0,0,100,100);
//      context.scale(2,2);
//      context.fillStyle = "red";
//      context.fillRect(100,100,100,100);
//      context.restore();
//      context.fillRect(0,200,100,100);



//      context.beginPath();
//      context.arc(300,300,200,0,360*deg,false);
//      context.lineWidth= 5;
//      context.stroke();
//      
//      context.translate(300,300);
//      
//      for(var i=0;i<12;i++){
//          context.rotate(30*deg);
//          context.beginPath();
//          context.moveTo(197,0);
//          context.lineTo(150,0);
//          context.lineCap = "round";
//          context.lineWidth= 10;
//          context.stroke();
//      }


        // 
        
//      context.beginPath();
//      context.moveTo(0,600);
//      context.quadraticCurveTo(300,600,600,0);
//      context.lineWidth = 5;
//      context.stroke();

        context.beginPath();
        context.moveTo(0,600);
        context.bezierCurveTo(0,0,600,600,600,0);
        context.lineWidth = 5;
        context.stroke();
        
    </script>

</code></pre> 
</article>
                            </div>
                        </div>