85 lines
1.4 KiB
HTML
85 lines
1.4 KiB
HTML
<html>
|
|
<body>
|
|
<canvas id="canvas" width=600 height=600 style="border:5px solid black">
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText(true);
|
|
|
|
var ctx = document.getElementById('canvas').getContext('2d');
|
|
var lingrad = ctx.createLinearGradient(0,0,600,600);
|
|
lingrad.addColorStop(0, '#00ABEB');
|
|
lingrad.addColorStop(1.0, '#fff');
|
|
|
|
var x = 10;
|
|
var y = 30;
|
|
|
|
ctx.font = "32px 'Times New Roman'";
|
|
ctx.fillText("Normal Fill Text", x, y);
|
|
|
|
y += 40;
|
|
|
|
ctx.lineWidth = 2;
|
|
ctx.strokeText("Normal Stroke Text", x, y);
|
|
|
|
y += 40;
|
|
|
|
ctx.fillStyle = lingrad;
|
|
ctx.fillText("Gradient Fill Text", x, y);
|
|
|
|
y += 40;
|
|
|
|
ctx.strokeStyle = lingrad;
|
|
ctx.strokeText("Gradient Stroke Text", x, y);
|
|
|
|
ctx.textAlign = "end";
|
|
|
|
x = 590;
|
|
y += 40;
|
|
|
|
ctx.fillStyle = 'black';
|
|
ctx.fillText("Normal Fill Text", x, y);
|
|
|
|
y += 40;
|
|
|
|
ctx.strokeStyle = 'black';
|
|
ctx.lineWidth = 2;
|
|
ctx.strokeText("Normal Stroke Text", x, y);
|
|
|
|
y += 40;
|
|
|
|
ctx.fillStyle = lingrad;
|
|
ctx.fillText("Gradient Fill Text", x, y);
|
|
|
|
y += 40;
|
|
|
|
ctx.strokeStyle = lingrad;
|
|
ctx.strokeText("Gradient Stroke Text", x, y);
|
|
|
|
y += 40;
|
|
x = 300;
|
|
|
|
ctx.textAlign = "center";
|
|
|
|
ctx.fillStyle = 'black';
|
|
ctx.fillText("Normal Fill Text", x, y);
|
|
|
|
y += 40;
|
|
|
|
ctx.strokeStyle = 'black';
|
|
ctx.lineWidth = 2;
|
|
ctx.strokeText("Normal Stroke Text", x, y);
|
|
|
|
y += 40;
|
|
|
|
ctx.fillStyle = lingrad;
|
|
ctx.fillText("Gradient Fill Text", x, y);
|
|
|
|
y += 40;
|
|
|
|
ctx.strokeStyle = lingrad;
|
|
ctx.strokeText("Gradient Stroke Text", x, y);
|
|
|
|
y += 40;
|
|
|
|
</script>
|