HTML5圖形SVG，canvas和CSS

我已經讀過HTML5 canvas和SVG標籤的介紹。我的問題是，在引入SVG和畫布之前，圖形如何製作？HTML5圖形SVG，canvas和CSS

僅僅使用了CSS和HTML嗎？

// CIRCLE帆布

<!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>

// 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>

example source

如何在沒有畫布和svg標籤的情況下完成此操作。

來源

2017-02-28 Khan

IE4是第一個引入類似畫布的元素。雖然沒有硬件加速，但它確實提供了創建圖形，圖標和不是的方法。現在已經超過17年了。在此之前，網頁只是鏈接和一些低分辨率圖像。沒有人真正想過瀏覽器不僅僅是鏈接的文檔閱讀器。 – Blindman67

CSS，.gif（和其他圖像）以及Adobe Flash Player被使用。（圖像和CSS仍在使用）

使用CSS：

.circle { 
 
     width: 100px; 
 
     height: 100px; 
 
     border-radius: 50%; 
 
     border: 1px solid #000 
 
    }

<div class="circle"></div>

來源

2017-02-28 22:19:36

你改變了我的第一個問題的答案，css被用於svg和canvas之前的圖形介紹？所以在這種情況下，會使用div標籤完成像這樣的圖形，對吧？ – Khan

我會使用div或其他HTML元素。但如果我需要動畫，我會使用.gif圖像。現在，我會使用CSS和帶有CSS動畫的HTML元素。 [CSS動畫]（https://www.w3schools.com/css/css3_animations.asp）是在SVG和canvas之後引入的。 –

IE有一個替代的SVG狀技術稱爲VML（矢量標記語言）。 IE5-8支持VML，IE9用SVG支持取代VML。

來源

2017-03-01 08:03:45

HTML5圖形SVG，canvas和CSS

回答

相關問題