canvas功能函数

封装一下常用的函数,

输入:通过一些固定的值，得到一个圆形,一个心形,一个波浪,一个涟漪,一个抛物线,一个自由弹起的过程。

返回: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();

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>