奥森图标、SVG 和 canvas 的使用

最新推荐文章于 2024-07-08 18:14:28 发布

carpenterworm1874

最新推荐文章于 2024-07-08 18:14:28 发布

阅读量778

点赞数 2

文章标签： html5 svg canvas 画图图标

本文链接：https://blog.csdn.net/carpenterworm1874/article/details/79643486

版权

 
 一、奥森图标用法： 

 
 http://code.z01.com/Boot/font.html 

 
 1、下载：进入奥森图标官网之后，点击“立即下载”将这个 
 Font Awesome 
 图标字体库和框架下载在自己的电脑上。  

 
 2.使用：  

 
 a.新建一个html文件，做好初步布局： 

 
 b.打开下载好的文件夹，复制  
 fonts  
 文件夹到页面所在的文件夹里，再将  
 css 
 文件夹里的 
 font-awesome.css 
 文件引入到页面中，然后在代码中加些内容：  

 
 在奥森图标官网中找到你想要用的图标，复制它对应的名字，如：  

 
 <p 
 > 
 这里是主页 
 <i 
  class 
 = 
 "fa fa-car" 
 ></i 
 ></p 
 > 

 
 注：这些图标的大小和颜色也可以通过css方法修改： 
 p{font-size:40px; color:red;}

注：奥森图标的大小是通过设置嵌套i标签父级元素的“font-size”属性来改变的（给子元素设置font-size不起作用，color起作用），并不是设置宽、高 。

   p{
      font-size: 50px;
   }
   i{

      font-size:80px;/*无效*/
      color: aqua;
   }

<p>这里是一个奥森图标<i class="fa fa-car"></i></p>

 
 二、svg 

 
 1、在svg在线编译器上画出图形，复制源代码 

https://c.runoob.com/more/svgeditor/

 
 2、将源代码放在html中 

 
 源代码是由 
 <svg></svg> 
 标签包起来的 将它放到 
 <body></body> 
 中想展示的位置即可 

我画的图形的源代码：

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
   <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
   <g>
      <title>background</title>
      <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
      <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
         <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
      </g>
   </g>
   <g>
      <title>Layer 1</title>
      <path id="svg_1" d="m104.97749,174.80164l38.45202,-51.51326l66.59596,-29.74338l76.90404,0l66.59596,29.74338l38.45201,51.51326l0,59.48676l-38.45201,51.51326l-66.59596,29.74337l-76.90404,0l-66.59596,-29.74337l-38.45202,-51.51326l0,-59.48676z" stroke-width="1.5" stroke="#000" fill="#07efef"/>
      <ellipse ry="24" rx="20" id="svg_2" cy="182" cx="200.5" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#4f0f0f"/>
      <ellipse ry="24" rx="20" id="svg_3" cy="182" cx="284.5" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#5b3414"/>
      <ellipse id="svg_5" cy="210" cx="281.5" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#07efef"/>
   </g>
</svg>

 
 <g>标签是一个容器（分组）标签，用来组合元素 

 
 3、什么是SVG 

 
 Svg是一种用XML定义的语言，用来描述二维及矢量/栅格图。 

 
 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
 

 
 4、svg跟canvas的比较： 

svg	canvas
矢量图（不依赖分辨率），不能引入图片（图片不是矢量）	标量图（依赖分辨率），可以引入jpg，png图片
使用 XML 描述 2D 图形的语言	通过 JavaScript 来绘制 2D 图形
支持事件处理器	不支持事件处理器
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）	弱的文本渲染能力
适合带有大型渲染区域的应用程序（比如谷歌地图）。不适合游戏应用。	适合图像密集型的游戏，还有统计图表
每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。	一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制。

 
 
svg的优势： 

 
 可以任意放大图形显示，但绝不会以牺牲图像质量为代价； 

 
 可在SVG图像中保留可编辑和可搜寻的状态； 

 
 平均来讲，SVG文件比JPEG和GIF格式的文件要小很多，因而下载也很快。 

 
 三、canvas 

 
 1、要使用canvas,必须先设置width,height属性定义的画布的大小（新建画布） 

 
 可以使用js为canvas对应的DOM对象设置width,height属性。也可以通过css为该元素添加样式. 

 
 2、使用 JavaScript 来绘制图像 

 
 要在canvas上面绘图，需要取得绘图的上下文，需要调用getContext()方法并传入上下文的名称 

 
 例子： 

//首先，找到 <canvas> 元素:
var drawing=document.getElementById("myCanvas");
//要检测getContext()方法是否存在
if(drawing.getContext){	
//然后，创建 context 对象，获取 canvas 绘图上下文环境：
var context=drawing.getContext("2d");
}

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

 
 2D上下文的坐标值开始于canvas元素的左上角。 

 
 3、两种基本绘图操作是填充和描边： 
 fillStyle  
 和  
 strokeStyle 

var drawing=document.getElementById("myCanvas");
if(drawing.getContext){
var context=drawing.getContext("2d");
context.strokeStyle="red";
context.fillStyle="yellow";
}

 
 4、举例 

 
 下列代码绘制一条直线： 

    var drawing=document.getElementById("myCanvas");
    if(drawing.getContext){
        var context=drawing.getContext("2d");
	context.moveTo(100,100);	//将绘图游标移动到该点
	context.lineTo(200,200);		//从上一个点开始到该点结束
        context.strokeStyle="red";	//用红色描边
	context.stroke();			//画线
    }

  画三角形 

var drawing=document.getElementById("myCanvas");
if(drawing.getContext){
    var context=drawing.getContext("2d");
    context.beginPath();
    context.moveTo(0,0);
    context.lineTo(200,200);
    context.lineTo(100,350);
    context.strokeStyle="red";
    context.closePath();
    context.stroke();				
}

carpenterworm1874

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
奥森图标、SVG 和 canvas 的使用

一、奥森图标用法：http://code.z01.com/Boot/font.html1、下载：进入奥森图标官网之后，点击“立即下载”将这个Font Awesome图标字体库和框架下载在自己的电脑上。 2.使用： a.新建一个html文件，做好初步布局：b.打开下载好的文件夹，复制 fonts 文件夹到页面所在的文件夹里，再将 css文件夹里的font-awesome.css文件引入到页面中，然后...
复制链接

扫一扫