JavaScript--シンプルなcanvasラベル

4279 ワード

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <!--          :     ,     : JS     -->
    <!--<style>-->
        <!--.canvas{-->
            <!--background-color: aqua;-->
        <!--}-->
    <!--</style>-->
    <script src="app.js"></script>
</head>
<body>

    <!--<canvas class="canvas" width="200px" height="200px"></canvas>-->

</body>
</html


var CANVAS_WIDTH = 500, CANVAS_HEIGHT = 500;

var mycanvas,context;

window.onload = function(){
    creatCanvas();
    drawRect();
    //drawImage();
}
function creatCanvas(){
    document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>";

    mycanvas = document.getElementById("mycanvas");
    context = mycanvas.getContext("2d");

}

function drawRect(){
    //       ,  :     ,       ,     
    context.fillStyle = "#FF0000";
    //context.rotate(45); //        
    //   :     
    //context.translate(200,200);
    //   ,     
    context.scale(2,0.5);
    //        
    context.fillRect(0,0,200,200);
}

function drawImage(){
    var img = new Image;
    img.onload = function(){
        context.drawImage(img,0,0);
    }
    img.src = "2.png";
}

JavaScriptは現在の時間、時間比較、時間変換を取得します.