Canvas 与 SVG

什么是SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics),是一种用来描述二维矢量图形的XML 标记语言。简单地说,SVG面向图形,XHTML面向文本。所以SVG图像可以无限放大,而且体积更小。注意只有IE9+以上支持。

使用SVG

1.坐标定位
<svg width="200" height="200" viewBox="0 0 100 100"> 或者直接使用img标签。
使用SVG第一步就是要通过width和height定义画布大小,viewBox属性定义了画布上可以显示的区域:从(0,0)点开始,100宽*100高的区域,实际上就是定义了一个坐标系,这个100相当于200px。

2.绘制图形
<line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5" stroke-linecap="round"/>
标签名称表示绘制的图形样式,例如:rect(四边形)、circle(圆)、ellipse(椭圆)、polyline(折线)、polygon (多边形)、path(路径)。
坐标:x、y表示关键点的坐标(圆形用rx、ry表示圆心)
颜色:fill属性设置对象内部的颜色,stroke属性设置绘制对象的线条的颜色。fill-opacity控制填充色的不透明度,属性stroke-opacity控制描边的不透明度。
描边:
stroke-width属性定义了描边的宽度。注意,描边是以路径为中心线绘制的,可以理解为给路径加一个边框,所以描边不是简单的宽度,而是路径的一圈边框。
stroke-linecap属性控制边框终点的形状。取值:
butt用直边结束线段,它是常规做法,线段边界90度垂直于描边的方向、贯穿它的终点。
square的效果差不多,但是会稍微超出实际路径的范围,超出长度等于stroke-width。
round表示边框的终点是圆角,圆角的半径等于stroke-width。
stroke-linejoin属性控制两条描边线段之间的连接方式,取值:miter(直角)、round(圆角)、bevel(平角)。

3.控制
用css和js都能控制svg,但是IE不支持css方法,所以我们只用js来控制。
1.对于嵌入在HTML中的svg,都在一个document下所以svg和其他HTMl元素没有区别,使用选择器选择元素后使用setAttribute()加入属性和值即可
2.对于通过src属性引入的svg文件,则需要contentDocument属性获得对应的document

  var object = document.getElementById("element");
  var svgDocument = object.contentDocument;

实例:

<p data-height="268" data-theme-id="21453" data-slug-hash="VePrOV" data-default-tab="result" data-user="zhangchen915" class='codepen'>See the Pen SVG时钟 by zhangchen (@zhangchen915) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

什么是Canvas

<canvas> 是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形。例如:画图,合成照片,创建动画甚至实时视频处理与渲染。注意Canvas同样只有IE9+以上支持。

使用Canvas

1.坐标定位
<canvas id="tutorial" width="150" height="150"></canvas>
和svg不同canvas只能在HTML文档内,而不能像图片一样引入。

2.访问绘画元素上下文
canvas初始是空白的,所以js首先需要找到渲染上下文。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

3.绘制图形
1.矩形
fillRect(x, y, width, height)绘制一个填充的矩形
strokeRect(x, y, width, height)绘制一个矩形的边框
clearRect(x, y, width, height)清除指定矩形区域,让清除部分完全透明。

2.绘制路径
beginPath()新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径。
moveTo(x, y)将笔触移动到指定的坐标x以及y上。注意:第一条路径构造命令必须用moveTo
lineTo(x, y)绘制一条从当前位置到指定x以及y位置的直线。
closePath()闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()通过线条来绘制图形轮廓。
fill()通过填充路径的内容区域生成实心的图形。

实例:

<p data-height="268" data-theme-id="21453" data-slug-hash="bEgLaM" data-default-tab="result" data-user="ge1doot" class='codepen'>See the Pen prometheus II by Gerard Ferrandez (@ge1doot) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

SVG与Canvas比较

比较.png

两种方案如何选择如何选择,下面一个图就够了

cancas&svg.png

拓展阅读:
MDN:SVG教程
SVG应用指南
JavaScript操作SVG的一些知识
Canvas的基本用法
SVG 与 Canvas:如何选择

css中的居中

看到一个总结很全的居中,本文是其部分译文,Absolute Centering

一、负边距法

这是最常用也是唯一兼容IE6/7的方法

 .is-Negative {
        width: 300px;
        height: 200px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}

但这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得。

优点:
支持所有的浏览器,包括IE6/7;
代码量较少
缺点:
非响应式。不基于百分比尺寸工作,不能设置MIN-/ MAX-
内容可溢出容器
需要用 padding来补偿 margin 或者使用 box-sizing: border-box

二、translate偏移法

Css3中可以使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的,于是,我们可以:

.is-Transformed {   
  width: 50%;  
  margin: auto;  
  position: absolute;  
  top: 50%; left: 50%;  
  -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
          transform: translate(-50%,-50%);  
}  

优点:

  1. 内容可变高度
  2. 代码量少
    缺点:
  3. IE8不支持
  4. 属性需要写浏览器厂商前缀
  5. 可能干扰其他transform效果
  6. 某些情形下会出现文本或元素边界渲染模糊的现象

三、表格单元格(Table-Cell)

总的说来这可能是最好的居中实现方法,因为内容块高度会随着实际内容的高度变化,浏览器对此的兼容性也好。最大的缺点是需要大量额外的标记,需要三层元素让最内层的元素居中。
HTML:

<div class="Center-Container is-Table">  
  <div class="Table-Cell">  
    <div class="Center-Block">  
    </div>  
  </div>  
</div>

CSS:

.Center-Container.is-Table { display: table; }  
.is-Table .Table-Cell {  
  display: table-cell;  
  vertical-align: middle;  
}  
.is-Table .Center-Block {  
  width: 50%;  
  margin: 0 auto;  
}  

优点:

  1. 高度可变
  2. 内容溢出会将父元素撑开。
  3. 跨浏览器兼容性好。
    缺点:

需要额外html标记

四、margin:auto实现绝对定位元素的居中

 
.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
 

解释:
通过以上描述,绝对居中(AbsoluteCentering)的工作机理可以阐述如下:
1、在普通内容流(normal content flow)中,margin:auto的效果等同于
margin-top:0;margin-bottom:0。
2、position:absolute使绝对定位块跳出了内容流,内容流中的其余部分渲染时3、为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框,此时该块block将填充其父元素的所有可用空间,父元素一般为body或者声明为position:relative;的容器。
4、 给内容块设置一个高度height或宽度width,能够防止内容块占据所有的可用空间,促使浏览器根据新的边界框重新计算margin:auto
5、由于内容块被绝对定位,脱离了正常的内容流,浏览器会给margin-top,margin-bottom相同的值,使元素块在先前定义的边界内居中。

优点:
1.支持跨浏览器,包括IE8-IE10.
2.无需其他特殊标记,CSS代码量少
3.支持百分比%属性值和min-/max-属性
4.只用这一个类可实现任何内容块居中
5.不论是否设置padding都可居中(在不使用box-sizing属性的前提下)
6.内容块可以被重绘。
7.完美支持图片居中。
缺点:
1.必须声明高度(查看可变高度Variable Height)。
2.建议设置overflow:auto来防止内容越界溢出。
3.在Windows Phone设备上不起作用。

五、Flexbox

这是CSS布局未来的趋势。Flexbox是CSS3新增属性,设计初衷是为了解决像垂直居中这样的常见布局问题。相关的文章如《Centering Elements with Flexbox》
记住Flexbox不只是用于居中,也可以分栏或者解决一些令人抓狂的布局问题。

.Center-Container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
 

优点:
内容块的宽高任意,优雅的溢出。
可用于更复杂高级的布局技术中。
缺点:

  1. IE8/IE9不支持。
  2. Body需要特定的容器和CSS样式。
  3. 运行于现代浏览器上的代码需要浏览器厂商前缀。
  4. 表现上可能会有一些问题

关于前端的学习

现在前端挺火,但是前端并不是一件简单的工作,市面上有各种各样的培训课程几千的几万的都有,但是其实作为“过来人”其是这些培训的作用其实不大,最好的方法还是自学,也许参加培训班你会写出一些简单的页面,确实少走了一些弯路,但是正因为你没有走过弯路,所以你以后再遇到弯路你还是不会走出来。现在免费的教程那么多,自学的成本也不是那么高,像网易云课堂,慕课网有好多优秀的视频课程。
给大家推荐一个学习网站FreeCodeCamp,这是虽然是一个英文网站,但是有高中英语水平你就能看懂,大不了还有翻译插件。这个网站没有视频,就是一个一个的小项目,对于新手而言动手很重要,一步一步跟着做最后你会发现自己提高了不少。最后晒一晒我在这个网站得到的证书!freecodecamp.jpg