HTML5使用canvas繪製圖形

乞力馬紮羅的雪CYF發表於2015-09-27
HTMLCanvas

1.繪製圖形

canvas元素本身是沒有繪圖能力的。所有的繪製工作必須在JavaScript內部完成。


示例程式碼如下：

（1）新建一個HTML檔案，實現程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <script src="app.js"></script>

</body>
</html>

（2）新建一個JavaScript檔案，實現程式碼如下：

/**
 * Created by chenyufeng on 15/9/27.
 */
var CANVAS_WIDTH = 2000, CANVAS_HEIGHT = 2000;
var mycanvas,context;

window.onload = function(){

    createCanvas();
    drawRect();

};

function createCanvas(){

    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(0.1);

    //平移
    //context.translate(100,100);

    //縮放
    context.scale(2,2);

    context.fillRect(50,50,100,200);

}

推薦大家一個檢視Web API的網站：https://developer.mozilla.org/zh-CN/      。這是我見過寫的最好的文件！


github主頁：https://github.com/chenyufeng1991  。歡迎大家訪問！

相關文章