画布,蓝天白云
初学画布,此次运营三次贝塞尔曲线,径向渐变,线性渐变,绘制圆弧等等。分开写了三个函数,一个绘制草原、一个绘制蓝天、一个绘制白云。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <style> #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; } </style> <canvas id="canvas"></canvas> <script> var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); canvas.width=800; canvas.height=600; context.fillStyle="white"; context.fillRect(0,0,800,600); drawPrairie(context); drawSky(context); for(var i=0; i <5; i++){ var x0 = 500 * Math.random() + 50; var y0 = 200 * Math.random() + 50; var c0 = 100 * Math.random() + 50; drawCloud(context, x0, y0, c0); } function drawSky(cxt) { /画天空(太阳)/ cxt.save(); cxt.beginPath(); cxt.moveTo(0,420); cxt.bezierCurveTo(250, 300, 350, 550, 800, 400); cxt.lineTo(800,0); cxt.lineTo(0,0); cxt.closePath(); var lineStyle = cxt.createRadialGradient(400, 0, 50, 400, 0, 200); lineStyle.addColorStop(0,"red"); lineStyle.addColorStop(0.3,"yellow"); lineStyle.addColorStop(1,"#97CBff"); cxt.fillStyle=lineStyle; cxt.fill(); cxt.restore(); } function drawPrairie(cxt) { /画草地/ cxt.save(); cxt.beginPath(); cxt.moveTo(0,420); cxt.bezierCurveTo(250, 300, 350, 550, 800, 400); cxt.lineTo(800,600); cxt.lineTo(0,600); cxt.closePath(); var lineStyle=cxt.createLinearGradient(0,600,600,0); lineStyle.addColorStop(0, "#00AA58"); lineStyle.addColorStop(0.3, "#93FF93"); lineStyle.addColorStop(1, "#00EC00"); cxt.fillStyle=lineStyle; cxt.fill(); cxt.restore(); } function drawCloud(cxt, cx, cy, cw) { //云朵移动范围即画布宽度 var maxWidth = 800; //如果超过边界从头开始绘制 cx = cx % maxWidth; //云朵高度为宽度的60% var ch = cw * 0.6; //开始绘制云朵 cxt.beginPath(); cxt.fillStyle = "white"; //创建渐变 var grd = cxt.createLinearGradient(0, 0, 0, cy); grd.addColorStop(0, 'rgba(255,255,255,0.8)'); grd.addColorStop(1, 'rgba(255,255,255,0.5)'); cxt.fillStyle = grd; //在不同位置创建5个圆拼接成云朵现状 cxt.arc(cx, cy, cw * 0.19, 0, 360, false); cxt.arc(cx + cw * 0.08, cy - ch * 0.3, cw * 0.11, 0, 360, false); cxt.arc(cx + cw * 0.3, cy - ch * 0.25, cw * 0.25, 0, 360, false); cxt.arc(cx + cw * 0.6, cy, cw * 0.21, 0, 360, false); cxt.arc(cx + cw * 0.3, cy - ch * 0.1, cw * 0.28, 0, 360, false); cxt.closePath(); cxt.fill(); } </script> </body> </html>