前端基础：H5与CSS3新特性

HTML5页面操作新特性

Canvas画布

• canvas元素本身并没有绘制能力，它仅仅是图像的容器，我们都是通过脚本来完成实际的绘图任务

• 定义画布

<canvas id="myCanvas" style="width: 300px; height: 200px; border: 1px solid red;">canvas>

• getContext("2d")

  • 内嵌的HTML5对象

  • 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

• 坐标

  • canvas是一个二维网格
  • 左上角坐标为(0, 0)

SVG

可伸缩矢量图形

地理位置

• HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的

• 获取用户位置的经度和纬度

  • navigator.geolocation.coords.latitude
  • navigator.geolocation.coords.longitude

拖拽API

实现步骤

• 设置被拖动元素的拖动属性draggable 为true

• 设置元素被拖动时发生的事件

• 设置被拖动元素放到何处

• 放置被拖动的元素

CSS3新特性

边框

css3中添加了新的边框属性

• border-image 设置所有边框图像的速记属性

• border-radius 设置所有四个边框半径属性的速记属性

  • border-top-left-radius 左上角弧度 其他三个角类似

• box-shadow 附加一个或多个下拉框的阴影

背景

• background-clip 规定背景的绘制区域

• background-origin 规定背景图片的定位区域

• background-size 规定背景图片的尺寸

文本效果

text-shadow 向文本添加阴影

字体

使用 CSS3，我们可以使用任何字体。把要使用的字体文件包含在网站中，用户电脑没有该字体的时候，它会自动下载给用户

CSS3 版本有关于 @font-face 规则描述了如何使用自定义的字体

• @font-face规则定义

  • font-family 必需，规定字体的名称

  • src 必需，定义字体文件的 URL

  • fon-stretch 可选，定义如何拉伸字体，默认是 “normal”

  • font-style 可选，定义字体的样式，默认是 “normal”

  • font-weight 可选，定义字体的粗细，默认是 “normal”

  • unicode-range 可选，定义字体支持的 UNICODE 字符范围，默认是 “U+0-10FFFF”

• @font-face使用

<style>
	/*字体:先自定义字体*/
	@font-face {
      
                /*自定义的名称*/
		font-family: linaFont;
                /*字体源文件-在项目中必须要有该源文件才可以（一般是自己公司设计师设计好的源文件）*/
		src: url(font/myfont.ttf);
	}			
	div {
      
		font-size: 48px;
		font-family: linaFont;/*字体样式使用上面自定的内容*/
	}
style>

CSS3中的2d转换

• CSS3的转换属性

  • transform 适用于2D或3D转换的元素

  • transform-origin 允许您更改转化元素位置

  • 注意事项

    • Internet Explorer 10, Firefox, 和 Opera支持transform 属性

    • Chrome 和 Safari 要求前缀 -webkit- 版本

    • 注意： Internet Explorer 9 要求前缀 -ms- 版本

• 2D 转换方法

  • rotate(angle) 定义 2D 旋转，在参数中规定角度

  • translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素

  • scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度