81 lines
1.8 KiB
XML
81 lines
1.8 KiB
XML
<!DOCTYPE html
|
|
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
|
<head>
|
|
<title>Context2D.quadraticCurveTo Test Case</title>
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText(true);
|
|
|
|
var ctx;
|
|
var current_point;
|
|
var current_center;
|
|
|
|
function M (x, y) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x,y);
|
|
current_point = [x,y];
|
|
current_center = [x,y];
|
|
}
|
|
|
|
function q (x1, y1, x, y) {
|
|
x1 += current_point[0];
|
|
y1 += current_point[1];
|
|
x += current_point[0];
|
|
y += current_point[1];
|
|
ctx.quadraticCurveTo(x1, y1, x, y);
|
|
current_point = [x,y];
|
|
current_center = [x1,y1];
|
|
}
|
|
|
|
function t (x, y) {
|
|
var x1 = current_point[0] * 2 - current_center[0];
|
|
var y1 = current_point[1] * 2 - current_center[1];
|
|
x += current_point[0];
|
|
y += current_point[1];
|
|
ctx.quadraticCurveTo(x1, y1, x, y);
|
|
current_point = [x,y];
|
|
current_center = [x1,y1];
|
|
}
|
|
|
|
function z () {
|
|
ctx.closePath();
|
|
}
|
|
|
|
////////////////////
|
|
|
|
function runTest() {
|
|
// setup canvas and context
|
|
var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
|
|
canvas.setAttribute('width', 480);
|
|
canvas.setAttribute('height', 360);
|
|
document.documentElement.appendChild(canvas);
|
|
ctx = canvas.getContext('2d');
|
|
|
|
// draw shapes equivalent to SVG path data "M 240 296 q 25 -100 47 0 t 47 0 t 47 0 t 47 0 t 47 0 z"
|
|
M(10,60);
|
|
q(25,-100,47,0);
|
|
t(47,0);
|
|
t(47,0);
|
|
t(47,0);
|
|
t(47,0);
|
|
z();
|
|
|
|
// stroke it
|
|
ctx.stroke();
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="runTest()">
|
|
|
|
<p>
|
|
This test case should produce a sine-wave stroked with 1px black.
|
|
</p>
|
|
|
|
</body>
|
|
|
|
</html> |