夜景图"/>
Canvas学习，使用Canvas绘制简单动画夜景图
Canvas学习，使用Canvas绘制简单动画夜景图
使用canvas绘制简单的动画夜景图，步骤如下：
1.设置线性渐变颜色，绘制星空背景
2.使用三次贝塞尔曲线绘制山坡
3.绘制星星，使用线条绘制
4.绘制月亮，使用二次贝塞尔曲线和圆弧绘制
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>绘制简单动画夜景图</title><style>canvas {border: 1px solid #ddd;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}</style></head><body><canvas id="canvas"></canvas><script>var canvas = document.getElementById("canvas");canvas.width = 1000;canvas.height = 600;function draw() {if (canvas.getContext) {var ctx = canvas.getContext("2d");// 设置星空线性渐变颜色var gradient1 = ctx.createLinearGradient(0, 0, 500, 500);gradient1.addColorStop(0, "#010509");// gradient1.addColorStop(.5, 'green');gradient1.addColorStop(1, "#00163e");ctx.fillStyle = gradient1;// 填充星空背景ctx.fillRect(0, 0, 1000, 600);ctx.fill();//三次贝塞尔曲线ctx.beginPath();ctx.moveTo(0, 600);// 使用三次贝塞尔曲线绘制山峰轮廓ctx.bezierCurveTo(75, 200, 200, 400, 1000, 600);ctx.stroke();// 设置山峰颜色var gradient = ctx.createLinearGradient(300, 600, 300, 300);gradient.addColorStop(0, "green");gradient.addColorStop(0.3, "green");gradient.addColorStop(1, "yellow");ctx.fillStyle = gradient;// 填充山峰颜色ctx.fill();ctx.closePath();// 绘制第二个山峰ctx.beginPath();ctx.moveTo(0, 600);ctx.bezierCurveTo(900, 100, 450, 400, 1000, 600);ctx.stroke();// var gradient1 = ctx.createLinearGradient(300, 500, 300, 300)// gradient1.addColorStop(0, 'green');// gradient1.addColorStop(.5, 'green');// gradient1.addColorStop(1, 'yellow');ctx.fillStyle = gradient;ctx.fill();ctx.closePath();}}draw();// 绘制星星function drawStar() {if (canvas.getContext) {let ctx = canvas.getContext("2d");for (let i = 0; i < 100; i++) {let x = Math.random() * 1000;let y = Math.random() * 250;ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x + 4, y - 2);ctx.lineTo(x + 6, y - 6);ctx.lineTo(x + 8, y - 2);ctx.lineTo(x + 12, y);ctx.lineTo(x + 8, y + 2);ctx.lineTo(x + 6, y + 6);ctx.lineTo(x + 4, y + 2);ctx.lineTo(x, y);ctx.fillStyle = "#fff";ctx.fill();ctx.closePath();}}}drawStar();// 绘制月亮function drawMoon() {if (canvas.getContext) {let ctx = canvas.getContext('2d')ctx.beginPath()let a = parseInt(40*Math.cos(Math.PI/6))ctx.moveTo(800-a,80-20)// 使用二次贝塞尔曲线绘制月亮内弧ctx.quadraticCurveTo(770, 110, 800+20, 80+a);// 使用圆弧绘制月亮外弧ctx.arc(800,80,40,Math.PI/3,Math.PI+Math.PI/6)ctx.strokeStyle = '#eee'ctx.fill()ctx.stroke()}}drawMoon()</script></body>
</html>运行效果图如下：
代码如有错误和可以改进的地方，欢迎大家指正，谢谢！！！
更多推荐
Canvas学习,使用Canvas绘制简单动画夜景图
发布评论