HTML5 新特性 Canvas
1.Canvas
1.1 什么是canvas?
canvas是一个可以通过脚本语言（主要指JavaScript）来绘制图形的HTML元素，语法结构是：
<canvas width="宽度" height="高度">
</cavas>
<canvas>元素默认的宽度为300像素，高度为150像素
<canvas>元素可以通过CSS样式来进行修饰，但一定避免修改其宽度和高度的样式，可通过以下方式实现：
- 直接在
<canvas>标签中书写width和height属性进行修改- 直接通过
HTMLCanvasElement的width和height属性进行修改
1.2 canvas有什么用？
- 数据可视化，如百度的
ECharts - 游戏画面
Banner广告
4.3 HTMLCanvasElement
• 概述
HTMLCanvasElement接口提供用于操纵canvas元素布局的属性和方法
HTMLCanvasElement接口继承自HTMLElement接口
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-whe9bg3m-1587726153888)(E:\www\Material\WEBTN1912\15_HTML5\Day02\note\assets\image-20200418175049544.png)]
• 属性
• width
width属性用于获取/设置<canvas>元素的宽度，其语法结构是：
//获取
variable = HTMLCanvasElement.width
//设置
HTMLCanvasElement.width = number value
• height
height属性用于获取/设置<canvas>元素的高度，其语法结构是：
//获取
variable = HTMLCanvasElement.height
//设置
HTMLCanvasElement.height = number value
• 方法
• getContext()
getContext()方法用于返回canvas的上下文对象，如果没有定义上下文将返回null，其语结构是：
HTMLCanvasElement.getContext(string contextType)
上下文类型的取值有：
2d，此时将建立一个Canva··sRenderingContext2D对象，是一个二维渲染对象
webgl，此时将建立 一个WebGLRenderingContext对象，是一个三维渲染对象
2.CanvasRenderingContext2D对象
2.1 绘制矩形
• strokeRect()方法
strokeRect()方法用于绘制矩形框，其语法结构是：
CanvasRenderingContext2D.strokeRect(x,y,width,height)
• fillRect()方法
fillRect()方法用于绘制填充矩形，其语法结构是：
CanvasRenderingContext2D.fillRect(x,y,width,height)
• clearRect()方法
clearRect()方法用于擦除指定区域所绘制的内容，其语法结构是：
CanvasRenderingContext2D.clearRect(x,y,width,height)
2.2 描边与填充
• strokeStyle属性
strokeStyle属性用于设置描边颜色，默认为#000，其语法结构是：
CanvasRenderingContext2D.strokeStyle = string color
关于
color的写法与CSS中的颜色表示方法是相同的
• fillStyle属性
fillStyle属性用于设置填充矩形，默认为#000，其语法结构是：
CanvasRenderingContext2D.fillStyle = string color
2.3 文本
• strokeText()方法
strokeText()方法用于绘制描边文本，其语法结构是：
CanvasRenderingContext2D.strokeText(text,x,y)
• fillText()方法
fillText()方法用于绘制填充文本，其语法结构是：
CanvasRenderingContext2D.fillText(text,x,y)
• font属性
font属性用于设置文本样式，默认样式为10px sans-serif，语法结构是：
CanvasRenderingContext2D.font = string value
文本样式采用与
CSS中font属性相同的规范
• textAlign属性
textAlign属性用于设置文本的对齐方式，其语法结构是：
CanvasRenderingContext2D.textAlign = 'left | center | right'
• measureText()方法
measureText()方法将返回TextMetrics对象，其语法结构是：
TextMetrics CanvasRenderingContext2D.measureText(string text)
TextMetrics对象包含width属性，将表示文本内容的宽度
3.window对象
• requestAnimationFrame()方法
window.requestAnimationFrame()方法用于在浏览器中定时循环操作的一个接口，类似于window.setTimtout()方法，主要用途是按帧对于网页进行重绘，其优势在于充分利用显示器的刷新机制（显示器有固定的刷新频率，一般为60Hz/75Hz，也就是代表每秒重绘60/75次）,与刷新频率保持一致。除此之外，如果使用该方法的话，一旦页面不处于浏览器的当前标签，则会自动停止刷新，以节省CPU，其语法结构是：
int window.requestAnimationFrame(callback)
返回值代表该方法产生的唯一
ID，该ID可以带入到window.cancelAnimationFrame()方法中，以取消回调函数的执行优点：
- 与显示刷新频率保持一致，不会出现卡顿、丢帧等现象
- 如果标签页不是浏览器当前标签页的话，自动停止刷新，以节省
CPU
