canvas绘制白云天空飘过特效动图
没事就喜欢搞点新玩意学习一下,下面这个canvas例子是仿照小米的天气绘图实现的,实现起来非常简单,就是简单的canvas的画图,没有太难的js,所以学起来还是很轻松的,对初学者来说哟一定的帮助,大神请绕道。当然前期是对canvas的基本知识有个很好的掌握,好了不多说了,不做太多代码解释,只要你有一定的canvas了解,就能看懂,直接上代码。
先看效果图:
HTML代码:
<canvas id="canvas" width="500" height="500"></canvas>
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)
其实就是对线、圆等图形的一个绘制,在canvas中已经有很好的介绍,不懂得同学先去补充一下canvas知识。
以上就是码云笔记前端博客为大家带来的canvas实例内容的学习,希望对你有帮助,也欢迎黑科技留言探讨。
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » canvas绘制白云天空飘过特效动图
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » canvas绘制白云天空飘过特效动图