图像处理与动画制作-2017 合成与透明度 教学设计(合成与透明度）.doc

北京电子科技职业学院 PAGE 1 H5动画知识点课程教案 CANVAS动画 合成与透明度 实验目的： 图像合成 设置透明度 一、组织教学内容 1.课前点名 2.简单的复习上节课内容 二、分析自学效果 根据学生课前自学微课后完成的项目任务进行分析。 三、总结自学中存在的问题 根据学生课前自学微课后完成的项目任务存在的优缺点问题进行总结。 四、解决方法 根据学生课前自学微课后完成的项目任务提出解决方式，具体解决根据学生出现的问题进行。 五、类似案例 效果图： 源码： !DOCTYPE html html lang=en head meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titleDocument/title /head body canvas id=myCanvas width=1000 height=800/canvas /body script var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); var img = new Image(); img.src = ./eg_tulip.jpg; img.onload = function(){ ctx.drawImage(img, 10, 10); ctx.drawImage(img, 100, 50); }; /script /html 六、案例教学 设置图像透明度 源码： !DOCTYPE html html lang=en head meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titleDocument/title /head body canvas id=myCanvas width=1000 height=800/canvas /body script var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); var img = new Image(); img.src = ./eg_tulip.jpg; img.onload = function(){ ctx.drawImage(img, 10, 10); var imgData = ctx.getImageData(10, 10, 400, 266); for (var i=0;iimgData.data.length;i+=4) { imgData.data[i+3]=120; } ctx.putImageData(imgData, 420, 10); }; /script /html 效果： 七、习题作业（习题+答案） 给图片打矩形水印 !DOCTYPE html html lang=en head meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titleDocument/title /head body canvas id=myCanvas width=1000 height=800/canvas /body script var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); var img = new Image(); img.src = ./eg_tulip.jpg; img.onload =