html5跨平台开发基础与实战 王寅峰电子任务10 使用canvas绘制图形.ppt

文档介绍：跨平台HTML5实战软件学院王寅峰任务10使用Canvas绘制图形学习目标【知识目标】掌握Canvas基本用法和样式设计;掌握如何在Canvas中绘制图形;掌握如何调用、渲染、裁剪和缩放图像;【技能目标】能用Canvas绘制图形;能直接用Canvas完成基本图像处理;引例描述薛总工在小新完成的前面几个项目的基础上,要求小新完善在线时钟的功能,一方面体现珍惜时间,热爱生命的寓意,另一方面希望小新能够通过交互式的方法进行终端应用开发并掌握HTML5的画布功能。当然在线时钟还可以满足用户个性化的需要,提升网站档次,黏住用户带来流量。想想看,登录后有一个与众不同的时钟为你而动,用户难道不想常回去看看吗。任务陈述利用Canvas绘制图形技术绘制《吃豆人》游戏中一个画面。1基本用法2绘制图形3使用图像的基本结构知识准备1基本用法1基本用法Canvas一般翻译为“画布”。在HTML5中,Canvas是一个新的HTML元素,您可以通过Script语言(通常是JavaScript)来使用它绘制图形,使用JavaScript在网页上绘制图形。1基本用法定义Canvas元素canvas元素在html页面中的定义如下:<canvasid="myCanvas"width="150"height="150"></canvas>1基本用法渲染上下文(RenderingContext)Canvas创建了一个固定的大小的绘图画面用于处理一个或多个渲染上下文(RenderingContext),我们可以通过渲染上下文来控制所要显示的内容。目前的Canvas只专注于2D的渲染上下文。JavaScript可以通过canvas元素对象的getContext方法来获取其渲染上下文,代码如下: varcanvas=('myCanvas'); varctx=('2d');