46 lines
849 B
HTML
46 lines
849 B
HTML
<html>
|
|
<body>
|
|
<canvas id="canvas" width=600 height=300 style="border:5px solid black">
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText(true);
|
|
|
|
var ctx = document.getElementById('canvas').getContext('2d');
|
|
|
|
var x = 10;
|
|
var y = 150;
|
|
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, 150);
|
|
ctx.lineTo(600, 150);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
|
|
ctx.font = "32px 'Times New Roman'";
|
|
|
|
var text = "Baseline";
|
|
var w = ctx.measureText(text).width;
|
|
ctx.fillText(text, x, y);
|
|
x += w + 10;
|
|
|
|
text = "Top";
|
|
ctx.textBaseline = "top";
|
|
w = ctx.measureText(text).width;
|
|
ctx.fillText(text, x, y);
|
|
x += w + 10;
|
|
|
|
text = "Bottom";
|
|
ctx.textBaseline = "bottom";
|
|
w = ctx.measureText(text).width;
|
|
ctx.fillText(text, x, y);
|
|
x += w + 10;
|
|
|
|
text = "Middle";
|
|
ctx.textBaseline = "middle";
|
|
w = ctx.measureText(text).width;
|
|
ctx.fillText(text, x, y);
|
|
x += w + 10;
|
|
|
|
</script>
|