封装一下常用的函数,
输入:通过一些固定的值,得到一个圆形,一个心形,一个波浪,一个涟漪,一个抛物线,一个自由弹起的过程。
返回:x,y坐标。
注意:
(1)坐标轴的位置,有的在0,0有的可能不在。
(2)有些是随机生成x,y有些希望均匀分布(均匀分布需要知道一共多少点)
(3)某些模块,某些特定东西生成的方式,比如一个越来越细的直线,一个颜色越来越淡的直线。
(4)熟练的记忆某些函数的特别之处。
1.如果想随机要一个正负的数.
Math.random()*2-1
如果想增幅是10的话
(Math.random()*2-1)*10
2.遇到边界问题的解决。
//边界值判断小于0或者大于最大值,那么cx,cy变为相反方向的改变
if(this.data[i].x>this.cw||this.data[i].x<0){
this.data[i].cX = -this.data[i].cX;
}
if(this.data[i].y>this.ch||this.data[i].y<0){
this.data[i].cY = -this.data[i].cY;
}
3.画虚线的函数。
//画虚线方法 CanvasRenderingContext2D.prototype.dashedLineTo = function (fromX, fromY, toX, toY, pattern) { // default interval distance -> 5px if (typeof pattern === "undefined") { pattern = 5; } // calculate the delta x and delta y var dx = (toX - fromX); var dy = (toY - fromY); var distance = Math.floor(Math.sqrt(dx*dx + dy*dy)); var dashlineInteveral = (pattern <= 0) ? distance : (distance/pattern); var deltay = (dy/distance) * pattern; var deltax = (dx/distance) * pattern; // draw dash line this.beginPath(); for(var dl=0; dl<dashlineInteveral; dl++) { if(dl%2) { this.lineTo(fromX + dl*deltax, fromY + dl*deltay); } else { this.moveTo(fromX + dl*deltax, fromY + dl*deltay); } } this.stroke(); };
4.画扇形
//扇形 CanvasRenderingContext2D.prototype.sector = function(x,y,r,starAng,endAng){ this.save(); this.beginPath(); this.moveTo(x,y); this.arc(x,y,r,starAng*Math.PI/180,endAng*Math.PI/180,false);//最后一个参数是false this.closePath(); this.restore(); return this; }
5.阴影 这个既可以渲染长方形,又可以渲染字体。
this.ctx.shadowColor = "rgba(0,0,0,0.2)";
this.ctx.shadowBlur = 6;
this.ctx.shadowOffsetX=3;
this.ctx.shadowOffsetY=3;
6.写字体。
ctx.fillStyle = '#2c2f34';
ctx.font = "16px Microsoft YaHei";
ctx.fillText("nihao",50,50)
ctx.fill();
7.
8.
9.
10
var yant = { num:function(min,max){ return Math.random()*(max-min)+min }, //产生color color:function(){ return 'rgba('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')'; } }
11.自己为了每次快速开发,瞎搞的代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #btn{position: absolute;bottom: 100px;left:50%;transform: translateX(-50%);z-index: 10;opacity: 0.5;} button{padding:5px;} </style> </head> <body> <div id="btn"></div> <script> window.onload = function(){ var piao = new Piao() var cxt = piao.cxt; cxt.fillStyle = "black"; cxt.beginPath() cxt.fillRect(0,0,piao.canvasWidth,piao.canvasHeight) cxt.stroke() cxt.closePath() } function Piao(){ this.canvas = null //容器canvas this.canvasWidth = null this.canvasHeight = null this.isBody = false //容器是不是document.body this.cxt = null //context this._init(); } Piao.prototype = { constructor:'Piao', _init:function(){ window.requestAnimFrame = ( function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ) { window.setTimeout( callback, 1000 / 60 ); }; })(); //创建元素 this._createCanvas(); //添加事件 this._addEvent(); }, _createCanvas:function(container){ if(typeof container == 'string'){ container = document.querySelector(container) } if(!container){ container = container || document.body; this.isBody = true; } var ele = document.createElement("canvas"); ele.id = "canvas"; ele.value = "sorry,your browser can not support canvas!"; //ele.style.width = 100%; //ele.style.height = 100%; this.cxt = ele.getContext('2d'); container.appendChild(ele); this.canvas = ele; }, _addEvent:function(){ /* document.addEventListener('mousemove',documentMousemove,false); document.addEventListener('mousedown',documentMousedown,false); document.addEventListener('mouseup',documentMouseup,false); canvas.addEventListener('touchstar',canvasTouchStar,false); canvas.addEventListener('touchmove',canvasTouchMove,false); */ window.addEventListener('resize',this._windowResizeEvent.bind(this),false) this._windowResizeEvent(); }, _windowResizeEvent:function(){ if(this.isBody){ this.canvas.width = this.canvasWidth = window.innerWidth; this.canvas.height = this.canvasHeight = window.innerHeight; } } } </script> </body> </html>