メモ(自分用)

mouchan51

svg

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  @keyframes moveRight {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  .ball-group {
    animation: moveRight 10s linear infinite;
  }
</style>
<title>SVG アニメーション</title>
</head>
<body>

<svg width="100%" height="100">
  <g class="ball-group">
    <circle cx="50" cy="50" r="30" fill="orange" />
    <line x1="50" y1="20" x2="50" y2="80" stroke="black" stroke-width="2">
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" dur="10s" repeatCount="indefinite" />
    </line>
    <line x1="20" y1="50" x2="80" y2="50" stroke="black" stroke-width="2">
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" dur="10s" repeatCount="indefinite" />
    </line>
  </g>
</svg>

</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  @keyframes moveRight {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  .ball-group {
    animation: moveRight 10s linear infinite;
  }
</style>
<title>SVG アニメーション</title>
</head>
<body>

<svg width="100%" height="100">
  <g class="ball-group">
    <image href="your-ball-image.png" x="20" y="20" height="60" width="60"/>
  </g>
</svg>

</body>
</html>

margin-top

<header style="height: 60px;">
  <!-- ヘッダのコンテンツ -->
</header>

.element-id {
  scroll-margin-top: 60px;
}

<script>
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.preventDefault();
      document.querySelector(this.getAttribute('href')).scrollIntoView({
        behavior: 'smooth',
        block: 'start',
      });
      window.scrollBy(0, -60); // 60はヘッダの高さに相当する値です
    });
  });
</script>

ベジェ

let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
let points = [];
let curves = [];

canvas.addEventListener('click', function(event) {
    let rect = canvas.getBoundingClientRect();
    let x = event.clientX - rect.left;
    let y = event.clientY - rect.top;

    points.push({x: x, y: y});

    if (points.length === 4) {
        curves.push([...points]);
        drawBezierCurve(points);
        points = [];
    }
}, false);

function drawBezierCurve(points) {
    context.lineWidth = 5;
    context.beginPath();
    context.moveTo(points[0].x, points[0].y);
    context.bezierCurveTo(points[1].x, points[1].y, points[2].x, points[2].y, points[3].x, points[3].y);
    context.stroke();
}

function redrawAllCurves() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (let curvePoints of curves) {
        drawBezierCurve(curvePoints);
    }
}

function undoLastCurve() {
    if (curves.length > 0) {
        curves.pop();
        redrawAllCurves();
    }
}

function saveAsSVG() {
    let svgContent = '<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">';
    for (let curvePoints of curves) {
        svgContent += generateSVGPath(curvePoints);
    }
    svgContent += '</svg>';

    // Save as file
    let blob = new Blob([svgContent], {type: "image/svg+xml;charset=utf-8"});
    let url = URL.createObjectURL(blob);
    let a = document.createElement('a');
    a.href = url;
    a.download = 'bezier_curves.svg';
    a.click();
}

function generateSVGPath(points) {
    return `
        <path d="M${points[0].x},${points[0].y} 
                 C${points[1].x},${points[1].y} 
                 ${points[2].x},${points[2].y} 
                 ${points[3].x},${points[3].y}" 
              stroke="black" 
              stroke-width="5" 
              fill="none" />
    `;
}

function openFile(event) {
    let input = event.target;

    let reader = new FileReader();
    reader.onload = function(){
        let dataURL = reader.result;
        let output = document.getElementById('backgroundImage');
        output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
}

document.getElementById('undoButton').addEventListener('click', undoLastCurve);
document.getElementById('saveButton').addEventListener('click', saveAsSVG);
document.getElementById('openFileButton').addEventListener('click', function() {
    document.getElementById('fileInput').click();
});
document.getElementById('fileInput').addEventListener('change', openFile);


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ベジェ曲線の描画</title>
<style>
  #myCanvas  {
    border: 1px solid #000 ;
    position: absolute;
    top: 0;
    left: 0;
  }
  #imageContainer  {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #f0f0f0 ;
  }
  #backgroundImage  {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    opacity: 0.5; /* You can adjust the opacity as needed */
  }
</style>
</head>
<body>

<div id="imageContainer">
  <img id="backgroundImage" alt="Background Image" />
  <canvas id="myCanvas" width="500" height="500"></canvas>
</div>
<input type="file" id="fileInput" style="display: none;" />
<button id="openFileButton">ファイルを開く</button>

<button id="undoButton">取り消し</button>
<button id="saveButton">SVGとして保存</button>

<script src="script.js"></script>

</body>
</html>

aクラスリンク

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Link Color Reset</title>
</head>
<body>
<a href="#" class="myLink">Click me</a>
<a href="#" class="myLink">Or me</a>

<script src="script.js"></script>
</body>
</html>

document.addEventListener('DOMContentLoaded', (event) => {
    const links = document.querySelectorAll('.myLink');

    links.forEach(link => {
        link.addEventListener('click', () => {
            link.classList.add('visited');

            // 5秒後に元の色に戻す
            setTimeout(() => {
                link.classList.remove('visited');
            }, 5000);
        });
    });
});

svg縮小

<svg width="650" height="150" viewBox="0 0 1300 300" ...>
  <!-- ここにあなたのpathや他の形状を描く -->
  <path d="あなたのpathデータ" ... />
</svg>

gasとhtml

function createDraft() {
  var forName = "Recipient Name";
  var to = "recipient@example.com";
  var subject = "Test Subject";
  var body = "Test Body";
  
  GmailApp.createDraft(forName, to, subject, body);
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <button onclick="createDraft()">Create Draft</button>
    
    <script>
      function createDraft() {
        google.script.run.createDraft();
      }
    </script>
  </body>
</html>

function createEvent(title, startTime, endTime) {
  var calendar = CalendarApp.getDefaultCalendar();
  var start = new Date(startTime);
  var end = new Date(endTime);
  calendar.createEvent(title, start, end);
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <input type="text" id="title" placeholder="Event Title">
    <input type="text" id="startTime" placeholder="Start Time (e.g., 'September 12, 2023 10:00')">
    <input type="text" id="endTime" placeholder="End Time (e.g., 'September 12, 2023 12:00')">
    <button onclick="createEvent()">Create Event</button>
    
    <script>
      function createEvent() {
        var title = document.getElementById('title').value;
        var startTime = document.getElementById('startTime').value;
        var endTime = document.getElementById('endTime').value;
        google.script.run.createEvent(title, startTime, endTime);
      }
    </script>
  </body>
</html>

この記事が気に入ったらサポートをしてみませんか？