canvas繪製風車效果
分享一段程式碼例項，實現了用canvas繪製風車的效果。
風車是動態的，並且也帶有動態的雲朵背景。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body{ padding: 0; margin: 0 auto; } </style> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> var oCanvas = document.getElementById('canvas'); var context = oCanvas.getContext('2d') var x = 0; var m = 0; var play = setInterval(function() { x++ m++ if (m > 500) { m = -400 } // 漸變背景 context.save(); var grd = context.createLinearGradient(0, 500, 0, 0); grd.addColorStop(0, '#2d2dff'); grd.addColorStop(0.4, '#8b8bff') grd.addColorStop(1, '#ddd'); context.fillStyle = '#8eb1f3'; context.fillRect(0, 0, 500, 500) context.restore() //雲 context.beginPath(); context.fillStyle = '#afcaf5'; context.arc(70 + m, 310, 50, 0, 2 * Math.PI, true); context.arc(130 + m, 260, 60, 0, 2 * Math.PI, true); context.arc(130 + m, 280, 60, 0, 2 * Math.PI, true); context.arc(140 + m, 310, 60, 0, 2 * Math.PI, true); context.arc(10 + m, 330, 30, 0, 2 * Math.PI, true); context.arc(180 + m, 360, 100, 0, 2 * Math.PI, true); // console.log(70+m) context.fill(); context.closePath(); //小云 context.beginPath(); context.arc(280, 130, 25, 0, Math.PI * 2, true); context.arc(240, 135, 25, 0, Math.PI * 2, true); context.arc(220, 135, 25, 0, Math.PI * 2, true); var grd1 = context.createLinearGradient(280, 90, 280, 130); grd1.addColorStop(0, "#acc8f7"); grd1.addColorStop(1, "#8eb1f3"); context.fillStyle = grd1; context.fill(); context.closePath(); context.beginPath(); context.arc(15, 80, 25, 0, Math.PI * 2, true); context.arc(50, 90, 25, 0, Math.PI * 2, true); var grd1 = context.createLinearGradient(15, 55, 15, 80); grd1.addColorStop(0, "#acc8f7"); grd1.addColorStop(1, "#8eb1f3"); context.fillStyle = grd1; context.fill(); context.closePath(); context.beginPath(); context.arc(470, 135, 30, 0, Math.PI * 2, true); var grd1 = context.createLinearGradient(530, 100, 530, 140); grd1.addColorStop(0, "#acc8f7"); grd1.addColorStop(1, "#8eb1f3"); context.fillStyle = grd1; context.fill(); context.closePath(); // 小山丘1 context.beginPath(); context.moveTo(0, 330); context.strokeStyle = '#96b7ec'; context.fillStyle = '#96b7ec'; context.bezierCurveTo(350, 350, 350, 450, 500, 500) context.lineTo(0, 500); context.lineTo(0, 350); context.fill(); context.stroke(); context.closePath(); // 大山丘2 context.beginPath(); context.moveTo(0, 400); context.strokeStyle = '#7da1df'; context.fillStyle = '#7da1df'; context.bezierCurveTo(200, 400, 300, 250, 500, 350) context.lineTo(500, 500); context.lineTo(0, 500); context.lineTo(0, 400); context.fill(); context.stroke(); context.closePath(); //風車1 // 柱子 context.beginPath(); context.moveTo(350, 320) context.strokeStyle = '#7496d6'; context.fillStyle = '#7496d6'; context.lineTo(352, 240); context.lineTo(354, 240); context.lineTo(356, 320); context.fill(); context.stroke(); context.closePath(); // 翅 context.save(); context.translate(353, 240); context.rotate(Math.PI / 40 * x); for (var i = 0; i < 3; i++) { context.beginPath(); context.fillStyle = "#80a5eb"; context.moveTo(-5, -0); context.lineTo(-2, 50); context.lineTo(2, 50); context.lineTo(5, 0); context.rotate(2 * Math.PI / 3); context.fill(); context.closePath(); } context.restore(); //圓 context.beginPath(); context.fillStyle = "#fff"; context.arc(353, 240, 5, 0, 2 * Math.PI, true); context.fill(); context.closePath(); // 風車2 // 柱子 context.beginPath(); context.moveTo(450, 330) context.strokeStyle = '#7496d6'; context.fillStyle = '#7496d6'; context.lineTo(452, 270); context.lineTo(454, 270); context.lineTo(456, 330); context.fill(); context.stroke(); context.closePath(); // 翅 context.save(); context.translate(453, 270); context.rotate(Math.PI / 30 * x); for (var i = 0; i < 3; i++) { context.beginPath(); context.fillStyle = "#80a5eb"; context.moveTo(-4, -0); context.lineTo(-1, 40); context.lineTo(1, 40); context.lineTo(4, 0); context.rotate(2 * Math.PI / 3); context.fill(); context.closePath(); } context.restore(); //圓 context.beginPath(); context.fillStyle = "#fff"; context.arc(453, 270, 3, 0, 2 * Math.PI, true); context.fill(); context.closePath(); // 風車3 // 柱子 context.beginPath(); context.moveTo(50, 335) context.fillStyle = '#7496d6'; context.lineTo(52, 270); context.lineTo(54, 270); context.lineTo(55, 335); context.fill(); context.closePath(); // 翅 context.save(); context.translate(53, 270); context.rotate(2 * Math.PI / 40 * x); for (var i = 0; i < 3; i++) { context.beginPath(); context.fillStyle = "#80a5eb"; context.moveTo(-4, -0); context.lineTo(-1, 40); context.lineTo(1, 40); context.lineTo(4, 0); context.rotate(2 * Math.PI / 3); context.fill(); context.closePath(); } context.restore(); //圓 context.beginPath(); context.fillStyle = "#fff"; context.arc(53, 270, 3, 0, 2 * Math.PI, true); context.fill(); context.closePath(); // 風車4 // 柱子 context.beginPath(); context.moveTo(150, 350) context.strokeStyle = '#7496d6'; context.fillStyle = '#7496d6'; context.lineTo(152, 290); context.lineTo(154, 290); context.lineTo(156, 350); context.fill(); context.stroke(); context.closePath(); // 翅 context.save(); context.translate(153, 290); context.rotate(Math.PI / 30 * x); for (var i = 0; i < 3; i++) { context.beginPath(); context.fillStyle = "#80a5eb"; context.moveTo(-4, -0); context.lineTo(-1, 30); context.lineTo(1, 30); context.lineTo(4, 0); context.rotate(2 * Math.PI / 3); context.fill(); context.closePath(); } context.restore(); //圓 context.beginPath(); context.fillStyle = "#fff"; context.arc(153, 290, 3, 0, 2 * Math.PI, true); context.fill(); context.closePath(); }, 20) </script> </body> </html>
相關文章
- canvas繪製流星效果Canvas
- canvas繪製網格射線效果Canvas
- canvas繪製卡通人臉形象效果Canvas
- canvas繪製多個圓圈效果Canvas
- canvas繪製經典星空連線效果Canvas
- 使用canvas繪製dribble風格水波浪Canvas
- canvas繪製圓盤走動鐘錶效果Canvas
- canvas繪製箭頭效果程式碼例項Canvas
- canvas繪製圓形框效果不填充內部Canvas
- canvas繪製帶有漸變效果的直線Canvas
- Flutter繪製-08-龍捲風效果Flutter
- canvas 繪製扇形Canvas
- canvas 繪製文字Canvas
- canvas 繪製矩形Canvas
- canvas 奇巧淫技（二）繪製箭頭路徑效果Canvas
- canvas 繪製圓形Canvas
- canvas繪製直線Canvas
- canvas lineWidth 繪製原理Canvas
- canvas lineWidth繪製原理Canvas
- canvas 繪製線條Canvas
- canvas 繪製圓角矩形Canvas
- canvas 繪製雙線技巧Canvas
- canvas繪製矩形框Canvas
- canvas 繪製矩形缺角Canvas
- canvas 繪製文字詳解Canvas
- canvas繪製笑臉表情Canvas
- Canvas 繪製雷達圖Canvas
- Canvas繪製一個類似老版支付寶信用分儀表盤效果Canvas
- canvas系列教程之繪製矩形Canvas
- canvas繪製不重合的圓Canvas
- canvas繪製sin正弦曲線Canvas
- Canvas(3)---繪製餅狀圖Canvas
- 用canvas繪製流星夜空Canvas
- canvas 繪製立體圓環Canvas
- canvas繪製動畫的技巧Canvas動畫
- canvas繪製圖案是重疊繪製而不是重置Canvas
- canvas 繪製圖案是重疊繪製而不是重置Canvas
- 使用canvas繪製圓弧動畫Canvas動畫