第05章Canvas习题解答.docVIP

第五章 参考解答 1．使用Canvas技术实现如下图所示画三条不同颜色的线段。 【解答】 !DOCTYPE html html head title/title /head body canvas id=canvas1/canvas script var c = document.getElementById(canvas1); var ctx = c.getContext(2d); ctx.beginPath(); ctx.lineCap = round; ctx.strokeStyle = blue; ctx.lineWidth = 10; ctx.moveTo(45, 25); ctx.lineTo(105, 25); ctx.stroke(); ctx.beginPath(); ctx.lineCap = butt; ctx.strokeStyle = green; ctx.lineWidth = 20; ctx.moveTo(25, 45); ctx.lineTo(225, 45); ctx.stroke(); ctx.beginPath(); ctx.lineCap = square; ctx.strokeStyle = red; ctx.lineWidth = 30; ctx.moveTo(65, 85); ctx.lineTo(205, 85); ctx.stroke(); /script /body /html 2．使用Canvas技术将图像边界显示为蓝色半透明阴影效果，如下图所示。 !DOCTYPE html html head title/title /head body canvas id=myCanvas width=300 height=150 /canvas script type=text/javascript var c = document.getElementById(myCanvas); var ctx = c.getContext(2d); ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.shadowBlur = 4; ctx.shadowColor = rgba(0, 0, 255, 0.5); var img = new Image(); img.src = images/Ex3.jpg; img.onload = function () { ctx.drawImage(img, 0, 0); } /script /body /html 3．请使用Canvas技术实现两个图像的叠加效果，如下图所示。 !DOCTYPE html html head title/title /head body canvas id=myCanvas width=300 height=150 /canvas script type=text/javascript var c = document.getElementById(myCanvas); var ctx = c.getContext(2d); var img1 = new Image(); img1.src = images/Ex41.jpg; var img2 = new Image(); img2.src = images/Ex42.jpg; img1.onload = function () { ctx.globalAlpha = 0.8; ctx.drawImage(img1, 0, 0); ctx.globalAlpha = 0.4; ctx.drawImage(img2, 0, 0); } /script