代码
提交代码
<!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=300 canvas.height=100 const ctx = canvas.getContext('2d'); ctx.rect(20,20,50,50) ctx.fillStyle = "#456795" // 设置阴影效果 ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.shadowColor = "#ccc"; ctx.shadowBlur = 4; ctx.fill(); // 恢复默认阴影效果 ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowBlur = 0; ctx.fillStyle="yellow" ctx.fillRect(100,20, 50, 50) </script>
运行结果