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

回答

相关问题