120 lines
2.0 KiB
HTML
120 lines
2.0 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
|
<html>
|
|
<body>
|
|
<script>
|
|
|
|
// Ensures that CanvasRendingContext2D's legacy setLineCap and setLineJoin operations match the behavior of the standard lineCap and lineJoin attributes.
|
|
|
|
var canvas = document.createElement('canvas');
|
|
document.body.appendChild(canvas);
|
|
canvas.setAttribute('width', '700');
|
|
canvas.setAttribute('height', '200');
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
ctx.miterLimit = 5;
|
|
ctx.lineWidth = 15;
|
|
|
|
ctx.fillStyle="rgba(255, 255, 255, 1.0)";
|
|
ctx.fillRect(0, 0, 700, 200);
|
|
|
|
ctx.strokeStyle="rgba(0, 0, 0, 1.0)";
|
|
ctx.lineJoin = "miter";
|
|
ctx.lineCap = "round";
|
|
|
|
ctx.translate(0, 50);
|
|
ctx.save();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(10, 100);
|
|
ctx.lineTo(30, 2);
|
|
ctx.lineTo(50, 100);
|
|
ctx.stroke();
|
|
|
|
ctx.translate(60 ,0);
|
|
ctx.beginPath();
|
|
ctx.moveTo(10, 100);
|
|
ctx.lineTo(30, 3);
|
|
ctx.lineTo(50, 100);
|
|
ctx.stroke();
|
|
|
|
ctx.translate(90 ,0);
|
|
ctx.save();
|
|
ctx.rotate(0.2);
|
|
ctx.beginPath();
|
|
ctx.moveTo(10, 100);
|
|
ctx.lineTo(30, 3);
|
|
ctx.lineTo(50, 100);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
|
|
ctx.restore();
|
|
|
|
ctx.lineJoin = "bevel";
|
|
ctx.lineCap = "square";
|
|
|
|
ctx.translate(200, 0);
|
|
ctx.save();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(10, 100);
|
|
ctx.lineTo(30, 2);
|
|
ctx.lineTo(50, 100);
|
|
ctx.stroke();
|
|
|
|
ctx.translate(60 ,0);
|
|
ctx.beginPath();
|
|
ctx.moveTo(10, 100);
|
|
ctx.lineTo(30, 3);
|
|
ctx.lineTo(50, 100);
|
|
ctx.stroke();
|
|
|
|
ctx.translate(90 ,0);
|
|
ctx.save();
|
|
ctx.rotate(0.2);
|
|
ctx.beginPath();
|
|
ctx.moveTo(10, 100);
|
|
ctx.lineTo(30, 3);
|
|
ctx.lineTo(50, 100);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
|
|
ctx.restore();
|
|
|
|
ctx.lineJoin = "round";
|
|
ctx.lineCap = "butt";
|
|
|
|
ctx.translate(200, 0);
|
|
ctx.save();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(10, 100);
|
|
ctx.lineTo(30, 2);
|
|
ctx.lineTo(50, 100);
|
|
ctx.stroke();
|
|
|
|
ctx.translate(60 ,0);
|
|
ctx.beginPath();
|
|
ctx.moveTo(10, 100);
|
|
ctx.lineTo(30, 3);
|
|
ctx.lineTo(50, 100);
|
|
ctx.stroke();
|
|
|
|
ctx.translate(90 ,0);
|
|
ctx.save();
|
|
ctx.rotate(0.2);
|
|
ctx.beginPath();
|
|
ctx.moveTo(10, 100);
|
|
ctx.lineTo(30, 3);
|
|
ctx.lineTo(50, 100);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
|
|
ctx.restore();
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|