Web 前端开发案例与实战单元10 高级特性.pdfVIP

单元10高级特性

知识入门

循序渐进

10.1HTML5文档结构

10.2Canvas绘图

知识拓展

知识入门

1.语义元素

2.画布的作用

3.画布中绘制图形的原理

循序渐进

10.1HTML5文档结构

10.2Canvas绘图

知识拓展

10.1HTML5文档结构

10.1.1文档结构元素

10.1.2拖放API

10.1.1文档结构元素

article标签

header标签

nav标签

section标签

aside标签

footer标签

HTML5还有一些其它文档结构元素如表所示。

10.1.2拖放API

1.设置元素可以拖放

标签draggable=true

2.设置拖放的内容

标签ondragstart=函数名(event)

函数的语法

function函数(ev){

ev.dataTransfer.setData(类型,ev.target.id);

}

3.设置拖放的目标位置

标签ondragover=函数名(event)

函数语法

function函数(ev){

ev.preventDefault();

}

4.进行放置元素

标签ondrop=函数名(event)

函数语法

function函数(ev){

ev.preventDefault();

vardata=ev.dataTransfer.getData(数据类型);

ev.target.appendChild(document.getElementById(data));

}

【任务10-1】制作一个宠物商品网

页

【任务描述】

（1）制作一个宠物商品网页。

（2）使用HTML5文档元素布局页面不同功能区。

10.2Canvas绘图

10.2.1canvas标签

10.2.2CanvasRenderingContext2D对象

10.2.3绘制矩形

10.2.4绘制图像

10.2.5绘制文字

10.2.6绘制路径

10.2.7绘制渐变图形

10.2.8线条样式

10.2.9绘制阴影

10.2.10图形坐标变换

10.2.11CanvasRenderingContext2D对象的其它属性和方法

10.2.1canvas标签

canvas标签是为了客户端矢量图形而设计的

canvas元素/canvas

10.2.2

CanvasRenderingContext2D对象

Canvas对象会定义了一个API支持脚本化客户端绘图

操作。

通过Canvas对象的getContext()方法可以获取到一个

CanvasRenderingContext2D对象。

Canvas.getContext(contextID);

10.2.3绘制矩形

绘制矩形需要使用到的CanvasRenderingContext2D对

象的绘制矩形的相关方法，如表所示。

方法