跨平台HTML5实战任务10使用Canvas绘制图形学习目标【知识目标】?掌握Canvas基本用法和样式设计；?掌握如何在Canv
as中绘制图形；?掌握如何调用、渲染、裁剪和缩放图像；【技能目标】?能用Canvas绘制图形；?能直接用Canvas
完成基本图像处理；引例描述薛总工在小新完成的前面几个项目的基础上，要求小新完善在线时钟的功能，一方面体现珍惜时间，热爱生命的
寓意，另一方面希望小新能够通过交互式的方法进行终端应用开发并掌握HTML5的画布功能。当然在线时钟还可以满足用户个性化的需要，提升
网站档次，黏住用户带来流量。想想看，登录后有一个与众不同的时钟为你而动，用户难道不想常回去看看吗。任务陈述利用Canvas绘制
图形技术绘制《吃豆人》游戏中一个画面。的基本结构知识准备1基本用法2绘制图形3使用图像1基本用法1基本用法Canva
s一般翻译为“画布”。在HTML5中，Canvas是一个新的HTML元素，您可以通过Script语言（通常是JavaScript）
来使用它绘制图形，使用JavaScript在网页上绘制图形。 1基本用法定义Canvas元素canvas元素在html页
面中的定义如下：
1基本用法渲染上下文（RenderingContext）Canvas创建了一个固定的大小的绘图画面用于处理一个或多个渲染
上下文（RenderingContext），我们可以通过渲染上下文来控制所要显示的内容。目前的Canvas只专注于2D的渲染上下
文。JavaScript可以通过canvas元素对象的getContext方法来获取其渲染上下文，代码如下： varcanv
as=document.getElementById(''myCanvas''); varctx=canvas.getContex
t(''2d''); 1基本用法浏览器的测试可以使用两种方式检查用户所使用的浏览器是否支持canvas画布元素。方法一：通
过“替换canvas在浏览器所显示的内容”检查浏览器是否支持canvas，代码如下：width="200"height="100"style="border:1pxsolid#c3c3c3;">您的浏览器
不支持Canvas元素！ 。 1基本用法方法二：通过脚本的方式来检查浏览器是否支持canvas。方法很简
单，判断getContext是否存在。代码如下：varcanvas=document.getElementById(''myC
anvas'');if(canvas.getContext){varctx=canvas.getContext(''2d''
);//在此编写绘图的代码}else{//在此编写浏览器不支持canvas元素时的代码} 1基本用法应用示例
绘制透明式矩形2绘制图形2绘制图形理解坐标2绘制图形绘制矩形绘制路径绘制各种线条绘制弧线贝塞尔和二次方曲线3使用图像
3使用图像Canvas中可以引入图像，用于图片合成或者制作背景等。PNG，GIF，JPEG等格式的图像都可以引入到canvas中
，而且其它的canvas元素也可以作为图像的来源。3使用图像引入图像只需要简单的两步引入图像：(1).第一步是指定图像来
源啦，图像可以是一个JavaScript中的Image对象引用，也可以是其它的canvas元素，但是却不能是简单的URL路径。(
2).然后用drawImage方法将图像插入到canvas中。教材介绍了4种可选的方式来获取图像对象。3使用图像dra
wImage方法三种形态drawImage渲染图片drawImage缩放图片drawImage裁剪图片任务实施实现效果登录界面 |
|
