Heim >Web-Frontend >HTML-Tutorial >canvas-6shadow.html_html/css_WEB-ITnose
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid"> The current browser does not support Canvas, can replace the browser a try! </canvas> <script> window.onload = function(){ var canvas = document.getElementById('canvas'); canvas.width = 1024; canvas.height = 768; if(canvas.getContext('2d')){ var context = canvas.getContext('2d'); context.fillStyle = "#058"; context.font = "bold 120px Arial"; context.textAlign = "center"; context.textBaseline = "middle"; //begin context.shadowColor = "gray"; context.shadowOffsetX = 20; context.shadowOffsetY = 20; context.shadowBlur = 25; context.fillText("Canvas",canvas.width/2,canvas.height/2) }else{ alert('当前游览器不支持Canvas,请更换游览器后再试!'); } } </script></body><script> /*阴影 context.shadowColor //偏移坐标 context.shadowOffsetX context.shadowOffsetY //模糊程度 context.shadowBlur */</script></html>