《网页设计语言》-第8章 Canvas

8.1canvas基础知识 8.2画布中的路径设置 8.3运用样式与颜色 8.3.1fillStyle和strokeStyle 8.4绘制渐变图形 8.5绘制变形图形 8.6给图形绘制阴影 8.7组合多个图形 8.8小结 主要内容2026/3/91canvasAPI可以在页面上绘制任何需要的、非常漂亮的图形、图像，制作出丰富多彩的Web页面。语法格式：<canvas></canvas>8.1什么是Canvas2026/3/92在HTML中放入canvas元素非常简单和直观，如下：<canvasid="canvas"width="400"height="300"/></canvas>以上代码会在页面上显示一块400像素×300像素的“隐藏”区块。要为其增加一个边框才可以看见。<canvasid="xyfg"width="400"height="300"style="border:1pxsolid"></canvas>在页面中放置canvas元素2026/3/93绘制带边框的矩形2026/3/948.2.1使用arc方法绘制圆形使用arc方法绘制圆形要想绘制其他图形，需要使用路径。同绘制矩形一样，绘制开始时还是要取得图形上下文，然后需要执行如下步骤。开始创建路径创建图像的路径关闭路径进行图形绘制简单来说，绘制圆形的步骤是先使用路径勾勒图形轮廓，然后设置颜色，进行绘制。8.2画布中的路径设置2026/3/952026/3/968.2.2使用moveTo和lineTo路径绘制火柴人2026/3/978.2.3贝塞尔和二次方曲线2026/3/98绘制对话框2026/3/99Canvas的样式与颜色设置，主要利用fillStyle和strokeStyle这两个属性。这两个属性的定义方法如下所示。fillStyle=color；strokeStyle=color；strokeStyle是用于设置图形轮廓的颜色，而fillStyle用于设置填充颜色。color可以是表示CSS颜色值的字符串、渐变对象或者图案对象。默认情况下，线条和填充颜色都是黑色(CSS颜色值#000000)。这里需要注意的是如果自定义颜色则应该保证输入符合CSS颜色值标准的有效字符串。下面的代码都是符合标准的颜色表示方式，都表示同一种颜色（橙色）。context.fillStyle="orange";context.fillStyle="#FFA500";context.fillStyle="rgb(255,165,0)";context.fillStyle="rgba(255,165,0,1)";8.3运用样式与颜色2026/3/9102026/3/9118.3.2透明度globalAlpha2026/3/912线型包括如下属性：lineWidth=valuelineCap=typelineJoin=typemiterLimit=value8.3.3线型linestyles2026/3/913Linecap2026/3/914lineJoin属性2026/3/915线性渐变8.4绘制渐变图形2026/3/916径向渐变2026/3/9171、平移context.translate(x,y);2、缩放context.scale(x,y);3、旋转context.rotate(angle);8.5.1绘制变形图形2026/3/9182026/3/9198.5.2矩阵变换2026/3/9208.6给图形绘制阴影2026/3/9218.7组合了多个图形2026/3/922Logo是网站或产品的主要组成部分学习绘制logo图补充案例Canvas绘制logo图2026/3/923学习统计图的绘制如：补充案例

统计图的绘制2026/3/924时钟也是网页的重要元素如补充案例

绘制时钟2026/3/925本章主要介绍HTML5中画布——canvasAPI，这是一个在网页上画图的编程接口。本章介绍如何使用canvasAPI绘制各种图形，并在讲解实例的同时对绘制中应用到的各种属性进行了详细的阐述。在讲解完绘制图形以后，继续讲解了如何在画布中使用