<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>绘制阴影</title> <style type="text/css"> canvas{background: gray;} </style></head><body> <canvas id="canvas" width="1000" height="1000"></canvas> <script type="text/javascript"> var canvas=document.getElementById('canvas'); context=canvas.getContext('2d'); context.shadowOffsetX=8; context.shadowOffsetY=8; context.shadowBlur=5; context.shadowColor="black"; context.fillStyle="Brown"; context.font="60px 楷书"; context.fillText("大众创业,万众创新",100,200); context.beginPath(); context.strokeRect(80,180,600,150); </script></body></html>
context.font="60px serif";
这样,文本字体就可以正常显示了。此外,您还可以使用字体库(例如Google Fonts)来定义文本字体,这样您就可以使用更多的字体,例如:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
context.font="60px Roboto";
这样,文本字体就可以正常显示了。希望这些建议能够帮助您解决问题。
Copy code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>绘制阴影</title>
<style type="text/css">
canvas {
background: gray;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="1000"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.shadowOffsetX = 8;
context.shadowBlur = 5;
context.fillStyle = "Brown";
context.fillText("大众创业,万众创新", 100, 200);
context.beginPath();
context.strokeRect(80, 180, 600, 150);
</script>
</body>
</html>
上面的代码中,我们使用 canvas 元素绘制了一个带有阴影的文本和矩形。通过设置 context.shadowOffsetX 和 context.shadowBlur 属性,可以控制阴影的偏移量和模糊度。本回答被提问者采纳