回到首页
个人中心
反馈问题
注册登录
下载APP
代码
提交代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>慕课网Wiki</title> <style> #imooc{ border:1px solid #ccc; } </style> </head> <body> <canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas> <script> const canvas = document.getElementById('imooc'); canvas.width=360; canvas.height=130; const ctx = canvas.getContext('2d'); // 绘制第一个矩形 ctx.fillStyle="red" ctx.shadowBlur=2; ctx.shadowOffsetX=4; ctx.shadowOffsetY=4; ctx.shadowColor="#ccc" ctx.fillRect(40,40, 40,40) // 绘制第二个矩形 ctx.fillStyle="yellow" ctx.shadowBlur=3; ctx.shadowOffsetX=8; ctx.shadowOffsetY=8; ctx.shadowColor="#456795" ctx.fillRect(100,40, 40,40) // 绘制第三个矩形 ctx.fillStyle="blue" ctx.shadowBlur=5; ctx.shadowOffsetX=5; ctx.shadowOffsetY=5; ctx.shadowColor="#222" ctx.fillRect(160,40, 40,40) // 绘制第四个矩形 ctx.fillStyle="yellow" ctx.shadowBlur=3; ctx.shadowOffsetX=8; ctx.shadowOffsetY=8; ctx.shadowColor="#456795" ctx.fillRect(220,40, 40,40) // 绘制第五个矩形 ctx.fillStyle="red" ctx.shadowBlur=2; ctx.shadowOffsetX=4; ctx.shadowOffsetY=4; ctx.shadowColor="#ccc" ctx.fillRect(280,40, 40,40) </script> <body> </html>
运行结果