运行效果:
<!DOCTYPE html> <html> <head> </head> <body> <canvas id="drawing" width="800" height="600">A drawing of someing!</canvas> <script type="text/javascript"> var drawing = document.getElementById(‘drawing‘); if(drawing.getContext) { //绘制立体文字 var context = drawing.getContext(‘2d‘); context.fillStyle = ‘Purple‘; context.textAlign = ‘center‘; context.textBaseline = ‘middle‘; context.font = ‘bold 100px Arial‘; context.fillText(‘莫‘, 290, 90); context.globalAlpha = 0.7; context.font = ‘bold 80px Arial‘; context.fillText(‘欺‘, 380, 90); context.globalAlpha = 0.6; context.font = ‘bold 70px Arial‘; context.fillText(‘欺‘, 205, 90); context.globalAlpha = 0.6; context.font = ‘bold 60px Arial‘; context.fillText(‘少‘, 450, 90); context.globalAlpha = 0.5; context.font = ‘bold 60px Arial‘; context.fillText(‘少‘, 140, 90); context.globalAlpha = 0.5; context.font = ‘bold 40px Arial‘; context.fillText(‘年‘, 500, 90); context.globalAlpha = 0.4; context.font = ‘bold 40px Arial‘; context.fillText(‘年‘, 95, 90); context.globalAlpha = 0.4; context.font = ‘bold 20px Arial‘; context.fillText(‘穷‘, 530, 90); context.globalAlpha = 0.3; context.font = ‘bold 20px Arial‘; context.fillText(‘穷‘, 65, 90); context.globalAlpha = 0.3; } </script> </body> </html>
时间: 2024-10-08 01:03:30