JavaScript -- 简单的canvas标签

<!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)