html 语言画线,javascript html5 画线 写文字

变化大小

$(function() {

var sceneWidth = 950;

var sceneHeight = 600;

var originX = 100;

var originY = 100;

var tileWidth = 64;

var tileHeight = 32;

drawXY(sceneWidth, sceneHeight, originX, originY);

drawTile(sceneWidth, sceneHeight, originX, originY, tileWidth, tileHeight);

})

function drawXY(sceneWidth, sceneHeight, originX, originY)

{

var canvas = document.getElementById("controlCanvas");

var context = canvas.getContext("2d");

context.beginPath();

// 画个矩形表示一张地图

context.moveTo(originX, originY);

context.lineTo(originX + sceneWidth, originY);

context.lineTo(originX + sceneWidth, originY + sceneHeight);

context.lineTo(originX, originY + sceneHeight);

// 写字

context.fillText("(0, 0)", originX - 45, originY - 15);

context.fillText(sceneWidth, originX + sceneWidth, originY - 5);

context.fillText(sceneHeight, originX - 20, originY + sceneHeight);

context.stroke();

}

function drawTile(sceneWidth, sceneHeight, originX, originY, tileWidth, tileHeight)

{

var canvas = document.getElementById("controlCanvas");

var context = canvas.getContext("2d");

context.beginPath();

var row = (sceneHeight + tileHeight - 1) / tileHeight;

var col = (sceneWidth + tileWidth - 1) / tileWidth;

for (var i = 0; i < row; ++i) {

context.moveTo(originX, originY + i * tileHeight);

context.lineTo(originX + sceneWidth, originY + i * tileHeight);

context.fillText(i, originX - 25, originY + i * tileHeight + 3);

}

for (var i = 0; i < col; ++i) {

context.moveTo(originX + i * tileWidth, originY);

context.lineTo(originX + i * tileWidth, originY + sceneHeight);

context.fillText(i, originX + i * tileWidth - 3, originY - 20);

}

context.stroke();

}