响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）课件 第6章 Canvas绘图与CSS动画.pptx

第6章Canvas绘图与CSS动画《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）》

学习目标/Target了解什么是画布，能够说出网页中画布的作用掌握画布的使用方法，能够创建画布、获取画布以及准备画笔掌握线条的绘制方法，能够根据实际需求完成线条的绘制掌握线条样式的设置方法，能够灵活地设置线条的宽度、描边颜色和端点形状掌握路径重置与闭合的设置方法，能够重置路径和闭合路径

学习目标/Target掌握填充路径的设置方法，能够填充路径掌握文本的绘制方法，能够根据实际需求完成文本的绘制掌握圆或弧线的绘制方法，能够绘制圆或弧线掌握过渡属性的使用方法，能够实现元素在不同状态下平滑的样式变换掌握变形的方法，能够实现元素的平移、缩放、倾斜和旋转等效果

学习目标/Target掌握动画属性的使用方法，能够实现丰富的动画效果掌握水果销量饼图页面的制作方法，能够完成水果销量饼图页面的开发掌握鲜花列表页面的制作方法，能够完成鲜花列表页面的开发掌握课程宣传页面的制作方法，能够完成课程宣传页面的开发

章节概述/SummaryHTML5提供了一个全新的Canvas（画布）功能，使用它，用户可以在网页中绘制丰富多彩的图形。通过HTML5的Canvas功能，可以创建各种数据可视化图表、图形等。此外，CSS3提供了强大的动画功能，可以为网页增添生动形象和引人关注的动画效果。本章将会详细讲解HTML5中的Canvas绘图功能和CSS动画技术的应用。

目录/Contents6-16-2水果销量饼图页面鲜花列表页面6-3课程宣传页面

水果销量饼图页面项目6-1

项目需求小刘是一位经营多家水果店的老板，为了更好地了解消费者的偏好并优化供应销售策略，小刘经常在季节交替时分析店铺内水果的销售情况。为此，他希望绘制一张饼图，以展示店铺中夏季部分水果的销量占比情况。

项目需求该店铺夏季部分水果的销量报表（单位：kg）如下所示。根据销量报表，可以计算出：苹果的销量占比为35%西瓜的销量占比为20%葡萄的销量占比为45%苹果西瓜葡萄350200450

项目需求本项目需要基于上述需求实现水果销量饼图页面的开发，水果销量饼图页面效果如下图所示。

知识储备先定一个小目标！了解什么是画布，能够说出网页中画布的作用1.认识画布

知识储备1.认识画布说到画布，也许大家并不陌生，在美术课上，它是绘画和涂鸦的主要工具。画架上的画布如下图所示。

知识储备1.认识画布在网页设计中，画布也扮演了相似的角色，它是专门用于绘制和展示特定样式效果的一个特殊区域。网页中的画布是一块矩形区域，默认情况下，该区域的宽度为300px、高度为150px，用户可以自定义画布的大小或其他属性和样式来改变画布的外观和行为。值得一提的是，与绘制在纸上的方式不同，在网页中的画布绘画是通过JavaScript来控制画布中的内容，例如绘制图像、绘制线条、添加文字等。

知识储备先定一个小目标！掌握画布的使用方法，能够创建画布、获取画布以及准备画笔2.使用画布

知识储备2.使用画布在网页中，画布并不是默认存在的。要使用画布进行绘图，首先需要创建画布，然后获取画布，最后准备画笔，以便在画布上进行绘图操作。

知识储备2.使用画布（1）创建画布在HTML文件中使用canvas标签创建画布。创建画布的语法格式如下。canvas标签用于创建画布。id属性用于指定画布的唯一标识符。canvas标签是一个双标签，在/canvas标签之前，可以添加用于在不支持canvas标签的浏览器中显示的替代信息，如“您的浏览器不支持Canvas。”。画布具有width和height两个属性，分别用于定义画布的宽度和高度。创建的画布是透明的，没有任何样式，可以使用CSS为其设置边框、背景等。canvasid=画布名称width=数值height=数值/canvas设置画布的宽度和高度时，尽量不要使用CSS样式，否则可能使画布中的图案变形。注意

知识储备2.使用画布（2）获取画布要想通过JavaScript控制画布，首先要获取画布。使用getElementById()方法可以获取画布对象。例如，获取id属性值为cavs的画布，示例代码如下。letcanvas=document.getElementById(cavs);

知识储备2.使用画布（3）准备画笔在开始绘图之前，需要获取一个绘制环境，即画笔。在画布中，这个画笔被表示为一个上下文对象，通常被称为context对象，可以通过画布对象的getContext()方法获取。该方法的参数取值为