49 lines
861 B
JavaScript
49 lines
861 B
JavaScript
function makePath(ctx, arg) {
|
|
if (ctx.createPath) {
|
|
return ctx.createPath(arg);
|
|
} else {
|
|
return new Path2D(arg);
|
|
}
|
|
}
|
|
|
|
export default function path2D(ctx) {
|
|
const path1 = makePath(
|
|
ctx,
|
|
`M 230 80
|
|
A 45 45, 0, 1, 0, 275 125
|
|
L 275 80 Z`
|
|
);
|
|
|
|
ctx.save();
|
|
ctx.strokeStyle = "red";
|
|
ctx.stroke(path1);
|
|
ctx.fillStyle = "grey";
|
|
ctx.fill(path1);
|
|
|
|
ctx.translate(10, 25);
|
|
ctx.lineWidth = 10;
|
|
ctx.stroke(path1);
|
|
|
|
ctx.rotate(Math.PI / 4);
|
|
ctx.scale(1.5, 1.5);
|
|
ctx.translate(10, 25);
|
|
|
|
ctx.strokeStyle = "blue";
|
|
ctx.stroke(path1);
|
|
ctx.restore();
|
|
|
|
ctx.save();
|
|
// Stroke and fill the same path.
|
|
ctx.beginPath();
|
|
ctx.rect(10, 10, 40, 20);
|
|
ctx.save();
|
|
ctx.strokeStyle = "red";
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
ctx.save();
|
|
ctx.fillStyle = "green";
|
|
ctx.fill();
|
|
ctx.restore();
|
|
ctx.restore();
|
|
}
|