A Pen By
shundroid

` ````
<canvas id="canvas" width="300" height="200"></canvas>
```

` ````
#canvas {
border: 1px solid black;
}
```

` ````
var lineWidth = 5;
var points = [
];
var outline1 = [];
var outline2 = [];
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function tick() {
if (points.length >= 10) {
points.splice(0, 1);
}
outline1 = [];
outline2 = [];
points.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height });
if (points.length <= 1) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "red";
ctx.beginPath();
points.forEach((point, index) => {
ctx.lineTo(point.x, point.y);
if (index === 0) {
// 始点
var rad = Math.atan2(points[index + 1].y - point.y, points[index + 1].x - point.x) - Math.PI / 2;
var sin = Math.sin(rad) * lineWidth;
var cos = Math.cos(rad) * lineWidth;
outline1.push({ x: point.x + cos, y: point.y + sin });
outline2.push({ x: point.x - cos, y: point.y - sin });
} else if (index === points.length - 1) {
// 終点
var rad = Math.atan2(point.y - points[index - 1].y, point.x - points[index - 1].x) - Math.PI / 2;
var sin = Math.sin(rad) * lineWidth;
var cos = Math.cos(rad) * lineWidth;
outline1.push({ x: point.x + cos, y: point.y + sin });
outline2.push({ x: point.x - cos, y: point.y - sin });
} else {
var rad1 = Math.atan2(points[index - 1].y - point.y, points[index - 1].x - point.x);
var rad2 = Math.atan2(points[index + 1].y - point.y, points[index + 1].x - point.x);
var rad = (rad2 - rad1) / 2;
var x = Math.cos(rad) * lineWidth / Math.sin(rad);
var y = lineWidth;
var rx = x * Math.cos(rad1) - y * Math.sin(rad1);
var ry = x * Math.sin(rad1) + y * Math.cos(rad1);
outline1.push({ x: point.x + rx, y: point.y + ry });
outline2.push({ x: point.x - rx, y: point.y - ry });
}
});
ctx.stroke();
ctx.strokeStyle = "black";
ctx.beginPath();
outline1.forEach(point => {
ctx.lineTo(point.x, point.y);
});
ctx.stroke();
ctx.strokeStyle = "black";
ctx.beginPath();
outline2.forEach(point => {
ctx.lineTo(point.x, point.y);
});
ctx.stroke();
}
setInterval(tick, 500);
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers