




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
项目七使用HTML5绘制钟表企业级卓越人才培养(信息类专业集群)目录01学习目标02学习路径03任务描述04任务技能05任务实施06任务总结01学习目标
学习目标010203了解Canvas了解阴影效果和颜色渐变效果的设置掌握使用Canvas绘制图形,文字学习目标
通过实现HTML5绘制钟表,学习Canvas标签的概念以及使用Canvas绘制图形文字等技能。04了解网页中图形、图片的绘制企业级卓越人才培养(信息类专业集群)02学习路径
学习路径企业级卓越人才培养(信息类专业集群)03任务描述
01情境导入
02功能描述03
基本框架
04开发环境
任务描述企业级卓越人才培养(信息类专业集群)
情境导入HTML5新增的Canvas元素可以让用户使用JavaScript在网页上绘制图像,从而使用HTML5新标签就可以做出丰富多彩的、炫目的界面和动画。本次任务主要是使HTML5绘制钟表。企业级卓越人才培养(信息类专业集群)
功能描述使用Canvas创建一个画布
01
02使用JavaScript绘制出一个简单地钟表企业级卓越人才培养(信息类专业集群)
基本框架企业级卓越人才培养(信息类专业集群)系统环境Windows7系统及以上系统软件环境服务器浏览器Sublime
TextTomcat7.0电脑端:火狐浏览器
谷歌浏览器手机端:Webkit内核浏览器
Android手机内置
浏览器
开发环境企业级卓越人才培养(信息类专业集群)04任务技能任务技能
Canvas概述
Canvas绘制基本图形绘制渐变图形
绘制渐变图形
图形组合使用图像任务技能
绘制文字
绘制变形图形
使用图像企业级卓越人才培养(信息类专业集群)Canvas概述Canvas是HTML5中的一个新标签,Canvas标签主要是用于图形绘制,在使用Canvas标签时通常需要定义三个属性:id属性、画布高度和宽度。其中画布大小的设置可以用CSS来定义,其默认值是300px和150px。HTML代码为:<canvasid="mycanvas"height="200"width="200">企业级卓越人才培养(信息类专业集群)建设制造强国1绘制直线2在使用canvas绘制图形时首先要知道绘制图形的起点,这就需要根据坐标系来判断坐标的位置,默认坐标系是以画布左上角(0,0)开始的,X向右增大,y向下增大。在默认坐标系中,每一个点的坐标都是直接映射到一个CSS像素上。每个Canvas实例对象中都拥有一个path对象,创建自定义图形的过程就是不断对path对象操作的过程绘制基本图形Canvas坐标系方法和属性功能moveTo(x,y)不绘制,只是将当前位置移动到新目标坐标(x,y),并作为线条开始点lineTo(x,y)绘制线条到指定的目标坐标(x,y),并且在两个坐标之间画一条直线,不管调用哪一个,都不会真正画出图形,因为还没有调用stroke(绘制)和fill(填充)函数,当前,只是在定义路径的位置,以便后面绘制时使用。strikeStyle属性是指定线条的颜色lineWidth属性设置线条的粗细企业级卓越人才培养(信息类专业集群)3绘制圆形4在画布中绘制矩形的方法在画布中绘制圆形的方法绘制基本图形绘制矩形方法描述fillRect绘制一个无边框矩形,示例fillRect(0,0,150,75)表示为左上角的坐标为(0,0)长度为150宽度为75。strokeRect绘制一个带边框的矩形,该方法的四个参数和上面的相同。clearRect清除一个矩形区域,被清除的区域没有任何线条。方法描述beginPath()开始绘制路径arc(x,y,radius,startAngle,endAngle,anticlockwise)X和y定义的是圆的中心,radius是圆的半径,startAngle和endAngle是弧度,不是度数,anticlockwise用来定义所画圆的方向,值是true或falseclosePath()结束路径的绘制fill()进行填充stroke()方法设置边框企业级卓越人才培养(信息类专业集群)绘制文字在画布中绘制文字的方式和操作其他路径对象的方式相同文本绘制功能由两个方法组成方法描述fillText(text,x,y,maxwidth)绘制待fillStyle填充的文字,文字参数以及用于制动文本位置的坐标的参数。Maxwidth是可选参数,用于限制字体大小,它会将文本字体强制收缩到指定的尺寸trokeText(text,x,y,maxwidth)绘制只有strokeStyle边框的文字企业级卓越人才培养(信息类专业集群)1绘制径向渐变2(1)创建渐变对象,vara=cxt.creatLinearGradient(0,0,0,canvas.height);(2)为渐变对象设置颜色,指明过渡方式,gradient.addColorStop(0,”#fff”);gradient.addColorStop(1,”#000”);(3)在context上为填充样式或者描边样式设置渐变cxt.fillStyle=gradient;想绘制径向渐变时需要创建渐变对象,可对文本,形状进行填充,语法为context.createRadialGradient(x0,y0,r0,x1,y1,r1);其中x0:渐变的开始圆的x坐标,y0:渐变的开始圆的y坐标,r0:开始圆的半径,x1:渐变的结束圆的x坐标,y1:渐变的结束圆的y坐标,r1:结束圆的半径。绘制渐变图形绘制线性渐变企业级卓越人才培养(信息类专业集群)1234Context对象中维持了一个保存当前Canvas状态信息的堆。Context对象提供了两个方法用于保存和恢复Canvas的状态,其原型如下:voidsave();
voidrestore();状态保存与恢复位移画布图形缩放图形旋转程序中使用ctx.translate(x,y)方法进行画布的平移,其中x表示添加到水平坐标(x)上的值,y表示添加到垂直坐标(y)上的值,发生位移后,相当于把画布的0,0坐标更换到新的x,y的位置,所有绘制的新元素都被影响实现图形的缩放使用scale(x,y)函数,该函数包含两个参数,分别代表x,y两个方向上的值使用context.rotate(angle)方法来旋转图像。rotate()方法默认是从左上端的(0,0)开始旋转,通过一个指定角度来改变画布的坐标和Canvas在浏览器中的映射绘制变形图形企业级卓越人才培养(信息类专业集群)图形组合前面已经讲过将一个图形画在另一个图形之上,本节主要介绍利用globalCompositeOperation属性改变图形的绘制顺序企业级卓越人才培养(信息类专业集群)使用图像要在画布Canvas上绘制图像,首先需要准备一张图片,图片可以通过HTML5或JS引入方法说明drawImage(image,dx,dy)接受一个图片,并将之画到canvas中。给出的坐标(dx,dy)代表图片的左上角位置。drawImage(image,dx,dy,dw,dh)接受一个图片,将其缩放,宽度为dw和高度为dh,然后把它画到canvas上的(dx,dy)drawImage(image,sx,sy,sw,sy,dx,dy,dw,dh)接受一个图片,通过参数(sx,sy,sw,sh)指定图片剪裁的范围,并缩放到(dw,dh)的大小,然后然后把它画到canvas上的(dx,dy)企业级卓越人才培养(信息类专业集群)05任务实施第一步:在HTML中定义一个画布canvas,设置画布的宽度和高度第一步:绘制表盘中的数字,并在表盘中显示刻度,刻度分大刻度和小刻度第二步:绘制钟表的表针任务实施企业级卓越人才培养(信息类专业集群)06任务总结任务技能任务实施任务拓展任务描述
通过本项目的学习,重点熟悉了HTML5中的<canvas>标签、画布与画笔、坐标与路径、各种网页图形的绘制、图片的绘制、阴影效果和颜色渐变效果的设置等,学会了应用<canvas>标签以及相关属性和方法进行网页图形绘制与游戏设计的方法。
任务总结企业级卓越人才培养(信息类专业集群)谢谢观赏PPT模板下载:/moban/行业PPT模板:/hangye/节日PPT模板:/jieri/PPT素材下载:/sucai/PPT背景图片:/beijing/PPT图表下载:/tubiao/优秀PPT
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 农村道路建设合同范本
- 翻修门窗服务合同范本
- 冷冻物品购销合同范本
- 租售全新吊篮合同范本
- 房屋租赁合同书 (八)
- 阅读指导课说课
- 项目管理工作总结和规划
- 广东省广州市普通高中毕业班2025年综合测试(一)地理试卷 (含答案)
- 预算员工作流程
- 项目物资管理亮点
- 初级食品销售练习
- 国开2023秋《人文英语4》第1-4单元作文练习参考答案
- 雅安厦钨新能源材料有限公司年产40000吨磷酸铁项目环境影响报告书
- 中国质量奖评审标准
- 潜水员体检表
- 《思想道德与法治》第三章
- 全过程工程咨询工作总结报告(全过程咨询)
- 桥梁预应力结构张拉压浆智能化施工成套技术
- 谐波减速器仿真优化
- 多重耐药菌护理查房-课件
- 土的筛分试验(JTG34302020)
评论
0/150
提交评论