• 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();

    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>
    

      

  • 相关阅读:
    Win10下配置Java 环境变量
    css background之设置图片为背景技巧
    让一个图片在div中居中(四种方法)
    js判断是否联网
    css 设置 checkbox复选框控件的对勾√样式
    CSS 实现对号效果
    关于input 的选中,自定义input[type="checkbox"]样式
    前端图片压缩上传(纯js的质量压缩,非长宽压缩)
    vscode: Visual Studio Code 常用快捷键
    Content:"2715",特殊字符和图标
  • 原文地址:https://www.cnblogs.com/coding4/p/7824714.html
Copyright © 2020-2023  润新知