2017-02-28 19 views
0

私は、HTML5キャンバスとSVGタグが導入されたことを読んだことがあります。 私の質問は、SVGとキャンバスが登場する前にグラフィックスはどうやって作られたのですか?HTML5グラフィックスSVG、キャンバス、CSS

CSSとHTMLだけが使用されましたか?

// CIRCLE CANVAS

<!DOCTYPE html> 
    <html> 
    <body> 

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 
    Your browser does not support the HTML5 canvas tag.</canvas> 

    <script> 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(95,50,40,0,2*Math.PI); 
    ctx.stroke(); 
    </script> 

    </body> 
    </html> 

canvas

// CIRCLE SVG

<!DOCTYPE html> 
    <html> 
    <body> 

    <svg width="100" height="100"> 
     <circle cx="50" cy="50" r="40" 
     stroke="black" stroke-width="1" fill="white" /> 
    Sorry, your browser does not support inline SVG. 
    </svg> 

    </body> 
    </html> 

SVG

example source

これはキャンバスとsvgタグなしでどのように行われますか?

+0

IE4は、キャンバスのような要素を初めて導入しました。ハードウェアは高速化されていませんが、グラフ、アイコンなどを作成する手段を提供しました。今は17年以上前です。その前に、そのウェブページはちょうどリンクといくつかの低解像度画像でした。誰も実際にリンクされたドキュメントリーダー以外の何ものでもないブラウザには何の考えもしていませんでした。 – Blindman67

答えて

1

CSS、.gif(および他の画像)、ならびにAdobe Flash Playerを使用した。 CSSで

を(画像やCSSがまだ使用されている):

.circle { 
 
     width: 100px; 
 
     height: 100px; 
 
     border-radius: 50%; 
 
     border: 1px solid #000 
 
    }
<div class="circle"></div>

+0

あなたは私の最初の質問に答えを変えました.svgとキャンバスが導入される前にCSSがグラフィックスに使われましたか?この場合、divタグでこのようなグラフィックを作成したでしょうか? – Khan

+1

divや別のHTML要素を使用します。しかし、アニメーション化が必要な場合は、.gifイメージを使用していました。今日私は、CSSとCSS要素を含むHTML要素を使用します。 SVGとキャンバスの後に[CSSアニメーション](https://www.w3schools.com/css/css3_animations.asp)が導入されました。 –

2

IEはVML(ベクターマークアップ言語)と呼ばれる代替SVGのような技術を持っていました。 IE5-8はVMLをサポートし、IE9はVMLをSVGサポートに置き換えました。