2018-09-04 分类：免费资源 作者：码云 阅读（85）
没事就喜欢搞点新玩意学习一下，下面这个canvas例子是仿照小米的天气绘图实现的，实现起来非常简单，就是简单的canvas的画图，没有太难的js，所以学起来还是很轻松的，对初学者来说哟一定的帮助，大神请绕道。当然前期是对canvas的基本知识有个很好的掌握，好了不多说了，不做太多代码解释，只要你有一定的canvas了解，就能看懂，直接上代码。
先看效果图：
HTML代码：
1 | <canvas id="canvas" width="500" height="500"></canvas> |
javascript代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 | 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实例内容的学习，希望对你有帮助，也欢迎黑科技留言探讨。
「如果觉得我的文章对您有用，请帮助本站成长」
觉得文章有用就打赏一下文章作者
支付宝
微信
上一篇：javascript实现手机端获取验证码邀请领取红包实例
下一篇：jQuery smartMenu右键自定义菜单插件的使用方法
稍等，我弄一下，失效了
评：WordPress博客主题 绿色扁平化响应式yusi主题1.0版本免费分享下载地址哪儿有啊？
评：WordPress博客主题 绿色扁平化响应式yusi主题1.0版本免费分享这个区间没有测试，那会儿只是为了赶项目，你可以下去试试
评：input number输入框最大和最小值之间的限制假如初始值是1，最小值是1，最大值支持100，你确定要点100下吗？
评：input number输入框最大和最小值之间的限制之前我写过一篇纯代码实现的，可以看一下
评：BaiduXZH Submit插件实现百度熊掌号链接自动提交扫一扫交互体验总结的很到位了
评：[交互体验]说说“扫一扫”中涉及的交互
|
|
共有 0 条评论 - canvas绘制白云天空飘过特效动图