HTML5使用canvas繪製圖形

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

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  。歡迎大家訪問!

相關文章