案例说明canvas二节.pdfVIP

canvas第二节

课前（无PPT）建议时间：25min

课程回顾（PPT2）建议时间：2min

1)带领学生回顾上节课canvas的知识点、以及这些知识点的用法，进行提问（内容概要详见PPT

第二页）

新课导入与概述（PPT3-5）建议时间：2min

1)阐述课程主体内容，包话效果的引入、本章目标与内容概要等。（内容概要详见PPT3-4页）

新课内容——图形的基本组合方式（PPT5-11）建议时间：20min

1)什么是图形的组合方式，图形的组合方式有哪些？（详见PPT5页）

canvas图形的组合方式：分为5种情况；第一种：原图在新图之上的4种组合；

第二种：新图在原图之上的4中组合；第一种和第二种除了顺序不一样，组合形式都一样；第三种：原图、新

图都绘制，并且部分颜色加色处理；第四种：只绘制原图、新图不部分，其他部分作透明色处理；第

五种：绘制的新图覆盖掉原图；后三种图形组合方式不分顺序；

2)设置组合方式用法的描述（详见PPT6页）。

（详情参照ppt-6页介绍，注意：globalCompositeOperation属性在某些浏览器内不兼容）

3）组合方式的属性值的详细介绍；（详见PPT7-11页）。

（详细介绍的同时，讲师需带领打代码，当每个设置组合方式的值都详细介绍过后，让看

ppt第10-11页，根据贴出的效果，来让思考有哪些相同和不同点，便于和理解，）

新课内容——图形的阴影（PPT12-14页）建议时间：10min

1)讲解如何给图形设置阴影：

阴影有四个属性：

阴影颜色、阴影模糊程度、阴影在x轴上的偏移量、阴影在y轴上的偏移量；

颜色的设置：可以是rgb值、rgba值、可以是颜色的英文单词，也可以是十六进制的值；

阴影的模糊级别：值为数值，数值越大，模糊度越大；

x、y轴上的偏移量：用数值表示，可正可负，正时为右下，负时为左上；

（这里带大家打例子）

新课内容——图像的处理（PPT15-26页）建议时间：20min

1）绘制图像

（这里的讲解思路：因为绘制图像有一个方法，但是这三个方法却分为3个参数的、5个参数的

9个参数的；因此，要循序渐进的讲解，从第一个只能在canvas画布上面绘图引出第二个，可以在画布上设置

要画图像的大小，到第三个方法可以、放大的局部区域；）

(3个参数的)drawImage（img,x,y）:这个方法能把一个绘制到画布中，img为，x、y为在画布

中的起始坐标