版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
网页设计与Web前端开发案例教程第10章
课业拓展CONTENT目录浏览器开发者工具01Canvas图形绘制02BootStrap框架03架设互联网网站04云服务0501浏览器开发者工具浏览器开发者工具简介元素Element鼠标选中元素→查看HTML源码→修改HTML片段终端Console查看Javascript报错+即时运行JS语句+打印日志安全性特点禁止访问本地硬盘不允许对网络中的文本修改或删除网络Network查看失效链接→查看原始HTTP报文→查看网络传输错误激活工具栏：快捷键F12快捷键F12直接按下F12快捷键激活检查元素右键点击页面元素，在右键菜单中选择“检查”选择元素与Element标签选择元素鼠标可以在左侧点击元素，右侧自动跳转对应源码鼠标也可以悬停右侧源码，左侧自动提示对应元素Console标签栏--查看报错Console标签栏--打印日志、招聘广告02Canvas图形绘制初识CanvasCanvas即画布，是HTML5加入的元素，用于像素图形的绘制。Canvas出现之前，页面中的图形绘制需要使用插件实现，如Flash和SVG(ScalableVectorGraphics，可伸缩矢量图形)，或者可以通过复杂的JavaScript代码来实现。在页面中加入了Canvas元素后，便可以通过JavaScript来自由地控制它，在其中添加图片、线条以及文字，也可以在里面绘图，甚至还可以加入高级动画。几乎所有现代的主流浏览器都支持Canvas。不同浏览器对Canvas的支持程度和性能可能会有所差异，因此在开发过程中建议进行兼容性测试，并根据不同浏览器的特点进行适配和优化。Canvas的坐标系统Canvas画布作为图形容器，在页面中表现为一个矩形区域Canvas画布2d环境的坐标系统延续web页面的坐标系统，默认坐标原点（0，0）在画布左上角，向右为x轴正向，向下为y轴正向，如图10-12中左图所示。在Canvas中除了坐标系统外，还经常使用到角度度量。Canvas中默认x轴正向为0度，顺时针的角度为正值，逆时针的角度为负值，如图10-12中右图所示。X轴Y轴原点（0，0）
0°-90°
180°90°图10-12Canvas默认坐标系统图使用Canvas的第一步是在Web页面中添加一个Canvas。添加Canvas很简单，只需要在<body>标签内添加一个<canvas>标签就可以了对Canvas元素的所有操作都要通过脚本代码实现，为了便于在JavaScript中更好的操作Canvas，通常给Canvas标签添加id属性，通过id可以快速准确找到Canvas。Canvas默认高度宽度为300×150像素通常情况下用户需要重新设置Canvas的大小Canvas的宽度和宽度设置要在HTML标签中设置高度与宽度属性，或者通过JavaScript对Canvas对象的width和height属性进行赋值。除了高度和宽度，Canvas的其他样式都可以交由CSS进行设置。Canvas的坐标系统每个Canvas包含内建的context对象（绘制环境/上下文），是访问绘图API的入口。获取方法：通过canvas.getContext(绘制类型)创建一个上下文对象单击此处输入你的项正文，文字是您思想的提炼，请尽量言简意赅的阐述观点。
绘制环境（Context）绘制类型说明2d二维渲染上下文（最常用）webglWebGL1版本三维渲染上下文webgl2WebGL2版本三维渲染上下文bitmaprenderer仅提供将canvas内容替换为指定ImageBitmap的功能的上下文webgpu
创建一个GPUcanvas上下文对象，为WebGPU渲染管道提供三维渲染绘制一个红色边框的矩形的步骤：首先通过id获得Canvas对象获得该Canvas的2d绘制环境执行绘图API：设置笔触颜色为红色，创建一个从（20，20）位置开始填充一个长100，高50的矩形路径，最后将矩形路径进行描边绘制代码：var
canvas=document.getElementById("myCanvas");var
context=canvas.getContext("2d");context.strokeStyle="#FF0000";context.rect(20,20,100,50);context.stroke();第一个绘制实例Canvas绘图API就是用来在Canvas中进行图形图像设置、绘制以及变换的一系列属性和方法。Canvas画布是一个图形容器，是图形的载体，其本身并不具备绘制能力，必须通过绘图API实现图形绘制。Canvas绘图API的功能非常强大，包括：路径、渐变色、图形变换、绘制环境保存、图像和文本绘制等。绘图API由画布的context对象调用绘图API路径是点及点间连线，可绘制矩形、圆弧、直线、曲线等常用属性和方法：lineWidth、fillStyle、strokeStyle、beginPath()、closePath()等1.绘制路径表10-1
Canvas的常路径方法列表属性和方法说
明lineWidth笔触（描边）宽度，默认值为1.0fillStyle填充颜色，默认值为黑色strokeStyle笔触(描边)颜色，默认值为黑色beginPath()起始一条路径，或重置当前路径closePath()将路径从当前点到起始点进行闭合。save()将当前环境状态保存到堆栈中restore()从堆栈中恢复最后保存的环境状态属性和方法说
明moveTo(x,y)把路径移动到画布中的指定点，不创建路径。lineTo(x,y)在画布中创建从当前点到指定点(x,y)的直线路径rect(x,y,width,height);在（x，y）位置创建一个矩形路径，宽度width，高度heightarc(x,y,r,stratAngle,endAngle[,anticlockwise])以（x，y）为圆心，r为半径，从stratAngle角度开始到endAngle创建弧线路径arcTo(x1,y1,x2,y2,r)在(x1,y1)和(x2,y2)两点间创建半径为r的弧线路径quadraticCurveTo(cpx,cpy,x,y)在当前点和（x，y）之间以（cpx,cpy）为控点创建二次贝塞尔曲线路径bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)在当前点和（x，y）之间以（cpx1,cpy1）和（cpx1,cpy1）为控点创建三次贝塞尔曲线。stroke()使用strokeStyle的值对当前路径进行描边fill()使用fillStyle的值对当前路径区域进行填充clearRect(x,y,width,height)清除指定的矩形区域fillRect(x,y,width,height)填充指定的矩形区域clip()从原始画布剪切任意形状和尺寸的区域表10-1
Canvas的常路径方法列表-续绘图的颜色属性可以使用普通CSS颜色或渐变色，如fillStyle和strokeSty渐变色需要先创建渐变色对象，然后设置渐变色对象中的颜色分布，之后才能作为颜色属性值使用。渐变色对象的创建很方便，由绘制环境创建。画布的渐变色分为线性渐变和径向渐变两种。1.线性渐变（LinearGradient）：
颜色沿一条直线方向平滑过渡，适用于平面、背景等区域。2.径向渐变（RadialGradient）：
颜色从一个中心点向四周以圆形方式扩散变化，适用于按钮、光源等效果。2渐变色的使用生成方法：通过绘制环境调用createLinearGradient()方法创建，代码如下参数说明：x0,y0：起始点坐标x1,y1：终止点坐标线性渐变色会从起点到终点沿直线方向变化，如图所示不同的起始点和终止点线性渐变色方向。2渐变色的使用--线性渐变色varlineGrad=context.createLinearGradient(x0,y0,x1,y1)生成方法：通过绘制环境调用createRadialGradient()方法创建，代码如下参数说明：(x0,y0)：径向渐变色起始环的圆心坐标r0：起始环的半径(x1,y1)：径向渐变色终止环的圆心坐标r1：终止环的半径径向渐变色会从起点环到终止环放射状变化，如图所示不同的起始环和终止环渐变色放射方向。典型用途：模拟光照、球体阴影、创建高光、聚焦、按钮等立体视觉效果2渐变色的使用-径向渐变色varradialGrad=context.createRadialGradient(x0,y0,r0,x1,y1,r1)渐变色可在不同位置添加的不同颜色对渐变色进行改变渐变色对象通过调用addColorStop(offset,color)添加颜色分布点：参数说明：offset：取值范围为0~1，表示颜色所在位置color：颜色值（如"#FF0000"或"rgba(0,0,0,0.5)"）2渐变色的使用-设置颜色点在Canvas绘图API中，提供了一系列对当前绘制环境进行变换的方法，可以实现缩放、旋转、移动等变换功能3.图形变换表10-2
Canvas常用变换方法列表方法说
明scale(scaleX,scaleY)将当前绘制环境的尺寸进行缩放，
scaleX为x轴缩放倍数，scaleY为y轴缩放倍数rotate(angle)将当前绘制环境进行旋转，angle为旋转的弧度translate(x,y)将当前绘制环境的坐标原点移动到(x,y)位置transform(a,b,c,d,e,f)将当前绘制环境按照转换矩阵进行转换setTransform(a,b,c,d,e,f)将当前转换重置为单位矩阵Canvas通过绘制环境context对象绘制图形时，context对象包含了绘制过程所需要的当前状态。当前状态是一个绘制堆栈，包括画布的当前属性、变换矩阵信息和当前剪裁区域。绘制环境状态可以通过API进行保存和恢复，通过调用save()可以将当前的状态保存到堆栈中。而通过调用restore()可以将保存的状态恢复到绘制环境中。当前属性包括globalAlpha、strokeStyle、fillStyle等所有的API属性变换矩阵信息包括坐标系统原点、坐标系统尺寸、角度坐标系统等剪辑区域是通过clip()方法获得的当前路径的剪辑区域。路径不属于绘制环境中的状态，不能保存在状态堆栈中。4绘制环境的保存与恢复Canvas提供强大的图像绘制功能，支持将图片、画布、视频等元素绘制到指定位置。绘制方法：通过drawImage()方法完成图像的绘制。该方法具备灵活的参数格式，支持缩放、裁剪等操作。适用范围：图片渲染视频帧抓取自定义截图与合成效果复杂动画中的贴图操作5绘制图像
加载时机：图像绘制必须在图片加载完成后进行。否则，绘制将失败且无任何提示。drawImage()三种调用格式第一种格式：drawImage(image,dx,dy) 说明：
以原图尺寸绘制图像，左上角位于(dx,dy)第二种格式： drawImage(image,dx,dy,dw,dh)说明：
将图像缩放至目标矩形区域，左上角为(dx,dy)，尺寸为dw×dh第三种格式：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)说明：
从源图像中裁剪(sx,sy,sw,sh)区域，缩放并绘制至目标(dx,dy,dw,dh)⚠️
注意：
参数格式不可混用，只能使用这三种完整组合方式。5绘制图像
CanvasAPI中提供了一些基本的文本属性和方法，这些属性和方法使得Canvas中的文本操作变得非常简单，表10-3中列出了常用的文本属性和方法6绘制文本表10-3
Canvas的文本属性和方法列表属性和方法示
例font字体属性，其语法与CSS的font属性相同textAlign对齐方式，可设置值有center、end、left、right和start（默认值）textBaseline文本基线，可设置值有alphabetic（默认值）、top、hanging、middle、ideographic、bottomfillText(text,x,y)从（x,y）开始的位置对将text内容进行填充strokeText(text,x,y)从（x,y）开始的位置对将text内容进行描边measureText(text)测量text文本在当前绘制环境中的宽度，使用measureText(text).width可获得宽度数值Canvas是静态图形容器：绘制完成的内容不会自动变化，因此无法直接实现动画。动画的实现方式是每一帧都重新绘制，也就是
逐帧动画=每帧刷新画面+更新图形状态依赖JavaScript的定时函数：
用于控制帧的更新间隔（即动画节奏）动画制作常见应用：路径动画元素位移动效模拟游戏帧刷新动画制作-三种动画控制方法（定时器）特点控制方式适用场景setInterval(code,millisec)固定时间间隔重复执行，无限触发使用
id=setInterval(...)
获取ID，通过
clearInterval(id)
停止执行需要定期重复执行的任务setTimeout(code,millisec)延迟指定时间后只执行一次，适合延迟任务和递归动画使用
clearTimeout(id)
取消执行单次延迟任务、递归实现的动画requestAnimationFrame(code[,element])浏览器优化的逐帧执行函数，自动以显示器刷新率（通常60fps）调用，动画更流畅、节能、精准无专门取消方法（可通过逻辑控制不再触发）所有Canvas动画场景（推荐）时钟案例实践本节案例综合了路径、变换、图像及动画制作等知识制作了一个时钟。实现步骤如下：设计时钟样式添加Canvas元素加载背景图片设置时钟绘制触发机制实现核心绘制函数drawAClock()分模块绘制函数实现完整代码可参考pra10.html文件。03BootStrap框架BootStrap快速上手不同版本，效果有差异原理一致导入css和js文件即可使用存储位置：HTML标签属性→DOM结构；JS对象属性→内存可见性：标签属性在Elements面板可见；JS属性在Console可见BootStrap解压目录点运算符（.）样式表字体脚本BootStrap——预定义的样式和控件btn类label类nav类04架设互联网网站域名服务域名IP邮件备案域名服务（DNS）将域名解析为IP地址，便于访问网站；邮件服务依赖域名指向邮件服务器IP；网站备案需将域名与IP绑定，确保合法合规。三者共同保障网络服务的可访问性和合法性。域名注册注册商挑选
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论