Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

HTML5 SVGで線を引く方法は？

SVGはScalableVectorGraphicsの略で、2DグラフィックスとグラフィカルアプリケーションをXMLで記述するための言語であり、XMLはSVGビューアによってレンダリングされます。ほとんどのWebブラウザーは、PNG、GIF、およびJPGを表示できるのと同じようにSVGを表示できます。

HTML SVGで線を引くには、SVGの要素を使用します。

HTML5 SVGで線を引く方法は？

例

次のコードを実行して、HTML5SVGで線を引く方法を学ぶことができます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 10%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>HTML5 SVG Line</title>
   </head>
   <body>
      <h2>HTML5 SVG Line</h2>
      <svg id = "svgelem" width = "300" height = "200" xmlns = "https://www.w3.org/2000/svg">
         <line x1 = "0" y1 = "0" x2 = "100" y2 = "100" style = "stroke:red;stroke-width:2"/>
      </svg>
   </body>
</html>

出力

HTML5 SVGで線を引く方法は？


  1. HTML5でlineTo（）を使用して線を引く方法は？

    HTMLで線を描画するには、canvas要素を使用します。キャンバスでは、lineTo（）メソッドを使用して線を描画します。 lineTo（）メソッドには、線を配置するxおよびyパラメーター値が含まれています。 例 次のコードを実行して、HTML5でlineTo（）を使用して線を引くことができます- <!DOCTYPE html> <html>    <head>       <title>HTML Canvas</title>    </head>

  2. Tkinterキャンバスに線を引く方法は？

    Tkinter Canvasウィジェットは、図形、オブジェクトの描画、グラフィックや画像の作成など、さまざまな目的に使用できます。キャンバスに線を引くには、 create_line（x、y、x1、y1、** options）を使用できます。 メソッド。 Tkinterでは、単純な線と破線の2種類の線を描くことができます。 dashプロパティを使用して線のタイプを指定できます。 例 # Import the required libraries from tkinter import * # Create an instance of tkinter frame or window win=