认识Canvas(二)

绘制文本

  1. strokeText(“文本内容”,x轴,y轴)
  2. fillText(“文本内容”,x轴,y轴)
  3. font属性:设置文本的格式:比如:font=”30px Microsoft Yahei”;
  4. textAlign:文本的水平对齐方式(默认值是 start)

    1. left 文本左对齐(文字的最左边靠着起点x轴所在)
    2. right 文本右对齐
    3. center 文本居中对齐
      1. 想要让文字在画布中水平居中,只需要设置文字的起点位置x轴的值为画布的总宽度的一半,同时这是文字水平居中:textAlign=”center”
    4. start相当于left
    5. end:相当于right

认识Canvas(一)

认识Canvas标签

  1. canvas标签是HTML5新增的一个html标签,只能在现代浏览器中使用,如果浏览器不支持canvas标签,就会把canvas标签当成一个普通的div标签来处理
  2. canvas标签具有默认宽高:300*150,水平方向上有300个像素点,垂直方向上有150个像素点
  3. 给canvas标签设置宽高
    1. 通过html标签的属性来设置宽高——>会增加canvas中的像素点的个数
    2. 通过样式设置宽高——>不会增加像素点的个数,只是扩大了像素点的体积

html5新增api

WEB迅猛的发展趋势已远远超乎我的想象,一起来探索下HTML5中的新知识吧。

多媒体相关的

方法:load() 加载、play() 播放、pause() 暂停
属性:currentTime 视频播放的当前进度、
duration:视频的总时间
paused:视频播放的状态.
事件:
oncanplay: 事件在用户可以开始播放视频/音频(audio/video)时触发。
ontimeupdate:通过该事件来报告当前的播放进度.
onended:播放完时触发

全屏:video.webkitRequestFullScreen();
html5新增api

CSS-3d变换

3D变换

transform:
rotate: 旋转
translate:位移
scale: 缩放

3d变换属性:

rotateX: 沿着x轴旋转
rotateY:  沿着y轴旋转
rotateZ:  沿着Z轴旋转
translateX: 沿着x轴移动
translateY: 沿着y轴移动
translateZ:  沿着Z轴移动 必须配合透视使用

透视: 近大远小
perspective : 200px   设置的是用户的眼睛 和盒子的距离
添加给变换元素的父盒子

透视只是一种视觉上的呈现 ,并不是正确的3d效果

浅谈HTML布局(三)

响应式布局

meta标签的实用

设置布局宽度等于设备宽度,布局viewport等于度量viewport

meta name=”viewport” content=”width=device-width,initial-scale=1”

媒体查询

HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体,
而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性,
扩展了媒体类型的功能;媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成,
媒体查询中可用于检测的媒体特性有width、height和color(等), 使用媒体查询, 可以在不改变页面内容的情况下,
为特定的一些输出设备定制显示效果。

语法

1
2
@media screen and (max-width:960px){your code}
<link rel="stylesheet" media="screen and (max-width:960px)" href='xxx.css'/>

浅谈HMTL布局(一)

单列布局

水平居中

水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)

使用inline-block 和 text-align实现

.parent{text-align: center;}
.child{display: inline-block;}

优点:兼容性好;
不足:需要同时设置子元素和父元素