<canvas id="myCanvas" width="600" height="300"></canvas>
canvas {
border: 1px solid #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
View Compiled
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded () {
canvasApp(); //包含整个Canvas应用程序
}
function canvasSupport (e) {
return !!e.getContext;
}
function canvasApp () {
var myCanvas = document.getElementById('myCanvas');
if (!canvasSupport(myCanvas)) {
return;
}
var ctx = myCanvas.getContext('2d');
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;
function drawGrid(color, stepX, stepY) {
ctx.strokeStyle = color;
ctx.lineWidth = 0.5;
for (var i = stepX + 0.5; i < myCanvas.width; i += stepX) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, myCanvas.height);
ctx.stroke();
}
for (var i = stepY + 0.5; i < myCanvas.height; i += stepY) {
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(myCanvas.width, i);
ctx.stroke();
}
}
function drawScreen() {
var dx = 50;
var dy = 50;
// 初始坐标原点
var x = 0;
var y = 0;
var w = myCanvas.width;
var h = myCanvas.height;
var xy = 10;
while (y < h) {
y = y + dy;
//横坐标的数字
ctx.font = "1px Calibri";
ctx.fillText(xy, x, y);
xy += 10;
}
// 画竖线
y =0;
xy =10;
while (x < w) {
x = x + dx;
//纵坐标的数字
ctx.font = "1px Calibri";
ctx.fillText(xy,x,10);
xy+=10;
}
drawGrid('#000', 50,50);
}
drawScreen();
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.