HTML5 新特性 Canvas

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()方法中，以取消回调函数的执行

优点：

1. 与显示刷新频率保持一致，不会出现卡顿、丢帧等现象
2. 如果标签页不是浏览器当前标签页的话，自动停止刷新，以节省CPU