1、 绘制圆弧: ctx.arc(x0,y0,r,起始弧度,结束弧度,是否逆时针)
1° = 2π /360 弧度
2、绘制文本: ctx.strokeText('字符串',坐标x,y)
ctx.fillText('',x,y)
文本属性: ctx.font=''----css的font样式用法一样
ctx.textAlign: right left center
ctx.textBaseLine: top middle bottom start end
3、 绘制图片:
3.1 实例化图片对象
3.2 为图片添加加载事件-----加载完成后,绘制图片
3.3 为图片对象添加src属性
绘制图片的方法: ctx.drawImage(img,x,y)
ctx.drawImage(img,x,y,w,h)
ctx.drawImage(img,
imageX,imageY,
imageW,imageH,
x,y,
w,h)
4、 坐标的转换
ctx.translate(x,y)
ctx.rotate(弧度)
ctx.scale(w,h)
1. 流式布局:使用百分比布局,非固定的像素,内容向两侧填充,理解成流动的布局,称为流式布局
2. 视觉窗口: viewport 移动端特有的。 这是一个虚拟的区域,承载网页的
分三类: 设备视口,页面视口,理想视口:一种理想的状态,设备视口=页面视口
承载关系: 浏览器----->viewport -----> 网页
1. 适配要求:
1) 网页的宽度必须和浏览器的宽度保持一致 width='device-width'
2) 默认的显示缩放比例和PC端保持一致(缩放比例1.0) initial-scale:1.0
3) 不允许用户进行缩放 user-scalable:0
----达到以上三点,达到了适配,是国际上通用的适配方案,标准的移动端适配方案
2. 适配设置:
视口: 在head标签下,跟着title标签后 <meta name='viewport' content='适配要求'>
viewport的功能:
1)width: 设置页面宽度 device-width:当前设备的宽度
2) height: 设置页面高度
3)initial-scale: 设置默认的缩放比例 1.0 【0.0~10.0】
4) maximum-scale: 设置最大缩放比例
5) minimum-scale: 设置最小缩放比例
6) user-scalable: 用户是否允许缩放 yes no 1 0
3. 标准的适配:<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
快捷键: meta:vp + tab键
屏幕像素: 也叫物理像素,像素点, 设备显示屏的最小可视颗粒的大小
非主流适配方案特征:根据设备分辨率的不同,设置缩放比例不同