博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用canvas 来实现一个菊花
阅读量:5323 次
发布时间:2019-06-14

本文共 7608 字,大约阅读时间需要 25 分钟。

关于canvas的save()和restore(),前面一直以为canvas的画面也会保存,然后restore后把画面恢复,那么就这样把自己给绕进去了,那么save和restore之间的操作还有何意义???  

摸爬滚打后理解了save 保存的是画布的坐标旋转缩放 以及fillstyle 和 其他等等的相关属性,已经画好了的图画不在之列。

做了个菊花 和 前面做的图片旋转移动 的 demo 来巩固下。

依然先看效果

---------------------代码分割线-----------------------------------------------------------------------------------------

1 var $=function(id){
2 3 return document.getElementById(id); 4 5 } 6 7 var isinit=false; 8 9 /** Canvas 类 10 11 * 12 13 * @param {Object} height 14 15 */ 16 17 var g_loadings = []; 18 19 function Canvas(height, con){
20 21 if (height == null) {
22 23 height = 24; 24 25 } 26 27 this.obj = document.createElement("canvas"); 28 29 var width = height; 30 31 if(con != null){
32 33 width += 82; 34 35 } 36 37 this.obj.setAttribute("width", width+500); 38 39 this.obj.setAttribute("height", height+500); 40 41 this.height = height; 42 43 this.ctx = this.obj.getContext("2d"); 44 45 // RGB 46 47 this.color = [51, 51, 51]; 48 49 var fsize = "14px"; 50 51 if(height>24){
52 53 fsize = "16px"; 54 55 } 56 57 this.ctx.save(); 58 59 this.ctx.fillStyle = "#646464"; 60 61 this.ctx.font = fsize+" \"Microsoft YaHei\",Helvetica"; 62 63 this.ctx.textBaseline = "middle"; 64 65 this.ctx.fillText(con, height+5, height/2); 66 67 this.ctx.restore(); 68 69 } 70 71 // 记录转动的度数,分8步 72 73 Canvas.prototype.rotation = 0; 74 75 // 每隔125ms会调用一次,绘制一个loading圆 76 77 Canvas.prototype.draw = function(){
78 79 var h = this.height, ctx = this.ctx, c = h / 16, d = h / 5, degree = -Math.PI * 2 / 10; 80 81 82 83 //ctx.save(); 84 85 // clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent 86 87 ctx.clearRect(-200, -200, 500, 500); 88 89 90 91 // 移到中点 92 93 if (!isinit){
94 95 ctx.translate(h / 2, h / 2); 96 97 isinit=true; 98 99 } 100 101 102 103 104 105 106 107 // 把一个圆分成8段,分别绘制 108 109 for (var i = 0; i < 10; i++) {
110 111 112 113 ctx.save(); 114 115 // 旋转一段的度数 116 117 ctx.rotate(i * degree); 118 119 // 根据旋转的角度设置颜色与透明度,eg: 120 121 // rotation=0 的时候, alpha的值 1, 0.875 ... 0.125 122 123 // rotation=1 的时候, alpha的值 0.875, 0.75 ... 1 124 125 ctx.fillStyle = "rgba(" + this.color[0] + "," + this.color[1] + "," + this.color[2] + "," + (10 - (i + this.rotation) % 10) / 10 + ")"; 126 127 // 绘制 fillRect(x,y,width,height) : Draws a filled rectangle 128 129 ctx.fillRect(-c / 2, d, c, d); 130 131 ctx.restore(); 132 133 } 134 135 //ctx.restore(); 136 137 138 139 this.rotation++; 140 141 this.rotation %= 10; 142 143 var load_canvas=this; 144 145 load_canvas.running = window.setTimeout(function(){load_canvas.draw();load_canvas=null;}, 100); // 由于分成10段,所以时间为100ms 146 147 }; 148 149 150 151 /** 152 153 * 创建Canvas 154 155 * 156 157 * @param {Object} parent 父节点,之前必须要至少一个子节点存在 158 159 * 如 取消 160 161 * @param {Object} height 长/高 162 163 */ 164 165 function initCanvas(parent, height, con){
166 167 // 如果是有子节点,说明需要做 loading 动画 168 169 if (parent && parent.firstChild && parent.firstChild.id != "sp") {
170 171 // 创建 Canvas 172 173 var canvas = new Canvas(height, con); 174 175 canvas.obj.id = "sp"; 176 177 // 放进数组 178 179 g_loadings.push(canvas); 180 181 parent.insertBefore(canvas.obj, parent.firstChild); 182 183 if (!canvas.running) {
184 185 186 187 canvas.draw(); 188 189 } 190 191 } 192 193 } 194 195 196 197 /** 198 199 * 删除 Canvas 200 201 * @param {Object} parent 父节点 202 203 * @param 返回 1 说明成功删除了一个正在loading状态的canvas 204 205 */ 206 207 function removeCanvas(parent){
208 209 if (parent && parent.firstChild && parent.firstChild.id == "sp") {
210 211 // loop整个数组中的 canvas 212 213 for (var i = g_loadings.length; --i >= 0;) {
214 215 var canvas = g_loadings[i]; 216 217 if (canvas.obj == parent.firstChild) {
218 219 //从 Dom 移除 220 221 parent.removeChild(parent.firstChild); 222 223 // remove interval 224 225 window.clearInterval(canvas.running); 226 227 canvas.running = null; 228 229 // 去掉 230 231 g_loadings.splice(i, 1); 232 233 return 1; 234 235 } 236 237 } 238 239 } 240 241 return 0; 242 243 } 244 245 function getOuterHeight(obj){
246 247 var mtop = obj.style.marginTop; 248 249 if(mtop==""){
250 251 mtop = 0; 252 253 } 254 255 var mbottom = obj.style.marginBottom; 256 257 if(mbottom==""){
258 259 mbottom = 0; 260 261 } 262 263 return obj.offsetHeight+parseInt(mtop)+parseInt(mbottom); 264 265 } 266 267 /** 268 269 * 页面统一 loading 270 271 * @param btnObj 如果有,则只给这个按钮加,否则整个页面 272 273 */ 274 275 function loading(btnObj, height, con){
276 277 278 279 if(con == null){
280 281 con = "正在载入..."; 282 283 } 284 285 if(btnObj){
286 287 if(height == null){
288 289 height = 24; 290 291 } 292 293 //给按钮加上loading 294 295 btnObj.setAttribute("selected", "progress"); 296 297 btnObj.style.display = "block"; 298 299 try{
300 301 initCanvas(btnObj, height, con); 302 303 }catch(ex){} 304 305 }else{
306 307 if(height == null){
308 309 height = 32; 310 311 } 312 313 //全局的 314 315 if(!$("preloader")){
316 317 var oDiv = document.createElement("div"); 318 319 oDiv.id = "preloader"; 320 321 oDiv.style.textAlign = "center"; 322 323 //oDiv.style.position = "relative"; 324 325 var oSpan = document.createElement("span"); 326 327 oDiv.appendChild(oSpan); 328 329 document.getElementsByTagName("body")[0].appendChild(oDiv); 330 331 } 332 333 var overlay = $("preloader"); 334 335 //var oHeight = getOuterHeight(overlay); 336 337 //定位到中间 338 339 //var top = parseInt(Math.max((getClientHeight() - oHeight) / 2, 0) + getScrollTop()); 340 341 //overlay.style.top = (top-height)+"px"; 342 343 overlay.style.marginTop = "150px"; 344 345 overlay.style.display = "block"; 346 347 try{
348 349 initCanvas(overlay, height, con); 350 351 }catch(ex){} 352 353 } 354 355 } 356 357 358 359 /** 360 361 * 停止页面统一loading 362 363 * @param btnObj 如果有,则只给这个按钮,否则整个页面 364 365 * @return 1/0 如果返回1说明已经有对应的实例在loading状态,此时要根据情况判断是否继续 366 367 */ 368 369 function unloading(btnObj){
370 371 var result = 0; 372 373 if(btnObj){
374 375 //给按钮加上loading 376 377 result = removeCanvas(btnObj); 378 379 btnObj.removeAttribute("selected"); 380 381 btnObj.style.display = "none"; 382 383 return result; 384 385 }else{
386 387 //全局的 388 389 var overlay = $("preloader"); 390 391 result = removeCanvas(overlay); 392 393 overlay.style.display = "none"; 394 395 overlay.style.marginTop = ""; 396 397 return result; 398 399 } 400 401 } 402 403 404 405 loading(null , 110 );

转载于:https://www.cnblogs.com/litao229/archive/2012/04/06/2434300.html

你可能感兴趣的文章
Android 发展思路
查看>>
Pythonic
查看>>
contentprovider的学习实例总结
查看>>
Sharepoint 自定义字段
查看>>
TQ2440之中断
查看>>
MySQL 触发器简单实例
查看>>
codeforces 712A. Memory and Crow
查看>>
Latex Undefined control sequence. ...\bm
查看>>
MySQL------报错Access denied for user 'root'@'localhost' (using password:NO)解决方法
查看>>
车牌识别LPR(三)-- LPR系统整体结构
查看>>
log4j异常:WARN No appenders could be found for logger
查看>>
新手村之顺序与分支
查看>>
4.秋招复习简单整理之java支持多继承吗?
查看>>
BZOJ2002: [Hnoi2010]Bounce 弹飞绵羊(LCT)
查看>>
Linux分区问题
查看>>
封装的ajax
查看>>
WP8 学习 Onnavigatedto和OnnavigatedFrom的区别
查看>>
java中Comparator接口的用法
查看>>
《Effective C#》读书笔记——条目3:推荐使用is或as而不是强制转换类型<C#语言习惯>...
查看>>
开发积累—泛型工具类
查看>>