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

《HTML5跨平台开发基础与实战 王寅峰电子任务10 使用Canvas绘制图形.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、跨平台HTML5实战软件学院王寅峰任务10使用Canvas绘制图形学习目标【知识目标】掌握Canvas基本用法和样式设计；掌握如何在Canvas中绘制图形；掌握如何调用、渲染、裁剪和缩放图像；【技能目标】能用Canvas绘制图形；能直接用Canvas完成基本图像处理；引例描述薛总工在小新完成的前面几个项目的基础上，要求小新完善在线时钟的功能，一方面体现珍惜时间，热爱生命的寓意，另一方面希望小新能够通过交互式的方法进行终端应用开发并掌握HTML5的画布功能。当然在线时钟还可以满足用户个性化的需要，提升网站档次，黏住用户带来流量。想想看，登录后有一个与众不同的时钟为你而动，用户难道

2、不想常回去看看吗。任务陈述利用Canvas绘制图形技术绘制《吃豆人》游戏中一个画面。1基本用法2绘制图形3使用图像的基本结构知识准备1基本用法1基本用法Canvas一般翻译为“画布”。在HTML5中，Canvas是一个新的HTML元素，您可以通过Script语言（通常是JavaScript）来使用它绘制图形，使用JavaScript在网页上绘制图形。1基本用法定义Canvas元素canvas元素在html页面中的定义如下：1基本用法渲染上下文（RenderingContext）Can

3、vas创建了一个固定的大小的绘图画面用于处理一个或多个渲染上下文（RenderingContext），我们可以通过渲染上下文来控制所要显示的内容。目前的Canvas只专注于2D的渲染上下文。JavaScript可以通过canvas元素对象的getContext方法来获取其渲染上下文，代码如下：varcanvas=document.getElementById('myCanvas');varctx=canvas.getContext('2d');1基本用法浏览器的测试可以使用两种方式检查用户所使用的浏览器是否支持canvas画布元素。方法一：通过“替换canvas在浏览器所显示的内容”检查

4、浏览器是否支持canvas，代码如下：您的浏览器不支持Canvas元素！。1基本用法方法二：通过脚本的方式来检查浏览器是否支持canvas。方法很简单，判断getContext是否存在。代码如下：varcanvas=document.getElementById('myCanvas');if(canvas.getContext){varctx=canvas.getContext('2d');//在此编写绘图的代码}else

5、{//在此编写浏览器不支持canvas元素时的代码}1基本用法应用示例绘制透明式矩形2绘制图形2绘制图形理解坐标2绘制图形绘制矩形绘制路径绘制各种线条绘制弧线贝塞尔和二次方曲线3使用图像3使用图像Canvas中可以引入图像，用于图片合成或者制作背景等。PNG，GIF，JPEG等格式的图像都可以引入到canvas中，而且其它的canvas元素也可以作为图像的来源。3使用图像引入图像只需要简单的两步引入图像：(1).第一步是指定图像来源啦，图像可以是一个JavaScript中的Image对象引用，也可以是其它的canvas元素，但是却不能是简单的URL路径。(2).然后用drawImage方

6、法将图像插入到canvas中。教材介绍了4种可选的方式来获取图像对象。3使用图像drawImage方法三种形态drawImage渲染图片drawImage缩放图片drawImage裁剪图片任务实施实现效果登录界面小结