画布跟js.oop

2022-12-21 07:51:56

<Canvas> 是HTML5中新出现的一个元素。就是可以通过  JS绘制图形。

画布跟js.oop

画布(Canvas)是一个没有内容也没有边框的矩形区域。我们可以控制里面的每一个像素。

下面我们首先定义一个 Canvas元素 ：

<canvas id="cancas" width="300" height="300"></canvas>

canvas 只有两个属性，width和height，这些属性可选并且可以通过JS或者css来控制：

<script type="text/javascript">

        function draw() {

            var c = document.getElementById("cancas");

            var cxt = c.getContext("2d");
//

它可以通过canvas元素对象的getContext方法来获取，同时得到的还有一些画图需要调用的函数。



getContext() 接受一个用于描述其类型的值作为参数。也就是  后面的 “2d” 或者 “3d”


            cxt.fillStyle = "#00ff00";

            cxt.fillRect(, , , );
//第一个属性时距离x轴的距离，第二个是距离y轴的距离，第三第四个是宽度跟高度

        }

</script>



画布跟js.oop






在做一个复杂的图形：




 <script type="text/javascript">

        function draw() {

            var c = document.getElementById("cancas");

            var cxt = c.getContext("2d");

            //红色区域，及其坐标

            cxt.fillStyle = "rgb(240,0,0)";

            cxt.fillRect(, , , );

            //在红色区域上面 添加一个灰色的区域，并且设置 透明度为 0.6

            cxt.fillStyle = "rgba(100, 100, 100, 0.6)";

            cxt.fillRect(, , , );

            //设置在最外面有一个绿色的只有边框的矩形

            cxt.strokeStyle = "#00ff00";

            cxt.lineWidth = ;   //设置边框的宽度为 5

            //最后去掉 这个图形的中心。

            cxt.strokeRect(, , , );

            cxt.clearRect(, , , );

        }

</script>



画布跟js.oop


效果图






画矩形




    <body>

         <canvas id="myCanvas" width="" height=""

  style="border:2px solid #000000;">

</canvas>

<script>

var c=document.getElementById("myCanvas");

        //然后，创建 context 对象：getContext("2d") 对象是内建的 HTML5 对象，

        //拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

           var ctx=c.getContext("2d");

            ctx.fillStyle="#FF0000";

        //  fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

         ctx.fillRect(,,,); 

</script>

    </body>


画布跟js.oop






画线




    <body>

         <canvas id="myCanvas" width="" height=""

  style="border:2px solid #000000;">

</canvas>

<script>

var c=document.getElementById("myCanvas");

        //然后，创建 context 对象：getContext("2d") 对象是内建的 HTML5 对象，

        //拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

           var ctx=c.getContext("2d");

           //开始坐标

          ctx.moveTo(,);

          //结束坐标

          ctx.lineTo(,);

            ctx.strokeStyle="blue";

       ctx.stroke();

</script>

    </body>



画布跟js.oop






画圆：




<body>

         <canvas id="myCanvas" width="" height=""

  style="border:2px solid #000000;">

</canvas>

<script>

var c=document.getElementById("myCanvas");

        //然后，创建 context 对象：getContext("2d") 对象是内建的 HTML5 对象，

        //拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

           var ctx=c.getContext("2d");

               ctx.fillStyle="red";

    ctx.beginPath();

    ctx.arc(,,,,*Math.PI,true);

    //画布的左上角坐标为0,0

// x：圆心在x轴上的坐标

// y：圆心在y轴上的坐标

// r：半径长度

// sAngle：起始角度，圆心平行的右端为0度

// eAngle：结束角度

//counterclockwise    可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

//注意：Math.PI表示180°，画圆的方向是顺时针

    ctx.closePath();

    ctx.fill();

</script>

    </body>


画布跟js.oop






文字：




<body>

         <canvas id="myCanvas" width="" height=""

  style="border:2px solid #000000;">

</canvas>

<script>

var c=document.getElementById("myCanvas");

        //然后，创建 context 对象：getContext("2d") 对象是内建的 HTML5 对象，

        //拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

           var ctx=c.getContext("2d");

      ctx.font="30px 微软雅黑";

      //fillText(text,x,y) - 在 canvas 上绘制实心的文本

       ctx.fillText("Hello World",,);

        //strokeText(text,x,y) - 在 canvas 上绘制空心的文本

      ctx.strokeText("Hello World",,);
//第一个属性是文字内容，第二个第三个属性是距离x ,y 轴的距离

</script>

    </body>


画布跟js.oop






填充渐变：




<body>

         <canvas id="myCanvas" width="" height=""

  style="border:2px solid #000000;">

</canvas>

<script>

var c=document.getElementById("myCanvas");

        //然后，创建 context 对象：getContext("2d") 对象是内建的 HTML5 对象，

        //拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

           var ctx=c.getContext("2d");

     var grd=ctx.createLinearGradient(,,,);

     grd.addColorStop(,"#FF0000");

     grd.addColorStop(0.5,"#00FF00");

     grd.addColorStop(,"black");

    //范围为0-1，中间数字随便用用

    ctx.fillStyle=grd;

    ctx.fillRect(,,,);

</script>

    </body>


画布跟js.oop






旋转属性:




<body>

         <canvas id="myCanvas" width="" height=""

  style="border:2px solid #000000;">

</canvas>

<script>

var c=document.getElementById("myCanvas");

        //然后，创建 context 对象：getContext("2d") 对象是内建的 HTML5 对象，

        //拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

           var context=c.getContext("2d");

    context.fillStyle="red";

context.fillRect(,,,)

context.transform(,0.5,-0.5,,,);

context.fillStyle="orange";

context.fillRect(,,,);

context.transform(,0.5,-0.5,,,);

context.fillStyle="yellow";

context.fillRect(,,,);

context.transform(,0.5,-0.5,,,);

context.fillStyle="green";

context.fillRect(,,,);

context.transform(,0.5,-0.5,,,);

context.fillStyle="aliceblue";

context.fillRect(,,,);

context.transform(,0.5,-0.5,,,);

context.fillStyle="blue";

context.fillRect(,,,);

context.transform(,0.5,-0.5,,,);

context.fillStyle="darkmagenta";

context.fillRect(,,,);

 /*    a    水平缩放绘图。

b    水平倾斜绘图。

c    垂直倾斜绘图。

d    垂直缩放绘图。

e    水平移动绘图。

f    垂直移动绘图。*/

</script>

    </body>


画布跟js.oop






做一个综合项目：




<body>

<canvas id="canvas" width="300px" height="300px" style="border: 1px solid"></canvas>

<script>

    var canvas=document.getElementById("canvas");

    var ctx=canvas.getContext("2d");

    ctx.beginPath();

//    两个大圆相交

    ctx.fillStyle="white";

    ctx.arc(,,,,*Math.PI/,false);

    ctx.fill();

    ctx.stroke();

    ctx.closePath();

    ctx.beginPath();

    ctx.fillStyle="black";

    ctx.arc(,,,,*Math.PI/,true);

    ctx.fill();

    ctx.stroke();

    ctx.closePath();

    //两个小圆

    ctx.beginPath();

    //ctx.restore(90*Math.PI/180);

    //返回之前保存过的路径状态和属性。

    ctx.fillStyle="black";

    ctx.arc(,,,,*Math.PI/);

    ctx.fill();

    ctx.stroke();

    ctx.closePath();

    ctx.beginPath();

   // ctx.restore(90*Math.PI/180);

    //返回之前保存过的路径状态和属性。

    ctx.fillStyle="white";

    ctx.arc(,,,,*Math.PI/);

    ctx.fill();

    ctx.stroke();

    ctx.closePath();

    ctx.beginPath();

    ctx.fillStyle="white";

    ctx.arc(,,,,*Math.PI/,true);

    ctx.fill();

    ctx.stroke();

    ctx.closePath();

    ctx.beginPath();

    ctx.fillStyle="black";

    ctx.arc(,,,,*Math.PI/);

    ctx.fill();

    ctx.stroke();

    ctx.closePath();

</script>

</body>
//自己插入代码，看看是什么东西




杨辉三角




   /*     1             1      1

         121            2      2

        12321           3      3

       1234321          4      4

      123454321         5      5*/

        for (var i=;i<=;i++){

            for(var j=;j<=-i;j++){

                document.write("&nbsp")

            }

        //递增

        num=;

        for (var k=;k<=i;k++){

            document.write(num)

            num++

        }

        //递减

        num -=;

        for(var l=;l<=i-;l++){

            document.write(num)

            num--

        }

        document.write("<br>")

    }    




—————————————————————————js.oop————————————————————


4 使用类和对象的步骤：
 ①：创建一个类（构造函数）：类名必须使用大驼峰法则，即每个单词的首字母都要大写
 function 类名(属性1){
 this.属性1=属性1；
this.方法=function(){
 //方法中要调用自身属性，必须使用this.属性
 }
 }


②：通过类，实例化（new）出一个对象，
 var obj=new 类名(属性1的具体指)
 obj.属性(); 调用属性 
 obj.方法()；调用方法




            function Person(name,age){

                this.name=name;

                this.age=age;

                this.say=function(content){

                    //在类中，访问类的自身的属性，必须使用this.属性调用

                    alert("我叫"+this.name+",今年"+this.age+"岁啦!我说了一句话："+content)

                }

            }

//通过赋值打印


//var arr=new Array();
			var zhangsan=new Person("张三",18);
			//zhangsan.say("哈哈哈");


var lisi=new Person("李四",24);//可以在后面赋值也可以！！后面赋值会覆盖前面
			lisi.name="李武";
			lisi.age=25;
			//lisi.say("张三白痴");


 




①：constructor：返回当前对象的构造函数。
 >>>zhangsan.constructor==Person


②：instanceof:检测一个对象，是不是一个类的实例
 >>>lisi instanceof Person  √ lisi是通过Person类new出的
			   >>>lisi instanceof Object √ 所有对象都是Object的实例
			   >>>Person instanceof Object  √函数本身也是对象


画布跟js.oop


【静态属性跟静态方法】：


2：通过“类名.属性”。“类名.方法”声明的属性和方法。称为静态属性，静态方法
 也叫类属性和类方法
 类属性/类方法，是属于类的(属于构造函数)
 通过"类名.属性名"调用
3 成员属性是属于实例化出的对象的，只能使用对象调用。
 静态属性是属于构造函数的，只能使用类名调用
 [私有属性和私有方法]
 4 在构造函数中，使用var声明的变量，属于私有属性；


在构造函数中，使用function声明的函数，称为私有方法
 function Person(){
 var num=1;//私有属性
 function func(){}//私有方法
 }
 私有属性跟私有方法的作用域，只鞥在构造函数内容有效，即，只能在构造函数内部使用；


在构造函数外部，无论使用对象名还是类名都无法调用。




function Person(name){

                this.name=name;//声明成员属性，

                var sex="男";//私有属性

                this.sayTime=function(){

                    alert("我说了当前时间是"+getTime());

                }

                this.writeTime=function(){

                    alert("我写了当前时间是"+getTime());

                }

                function getTime(){//私有方法

                    return new Data();

                }

            }

            var zhangsan=new Person("张三")

            zhangsan.age=;//追加成员属性

          /*alert(zhangsan.name)

          alert(Person.name)*/

          /*alert(zhangsan.age)；*///调用成员属性

          Person.count="60亿";//声明静态属性

          console.log(Person.count);//调用静态属性

          var lisi=new Person("李四");

          console.log(lisi.count)//Undefined静态属性是属于类的，只能由类名调用

          console.log(lisi.count);//undefined 静态属性时属于类的，只能用类名调用

          console.log(lisi.sex);

          console.log(Person.count);




谁最终调用函数，this就指向谁
 ①：this指上谁，不应该考虑函数在哪里声明，而应该考虑函数在哪里调用！
 ②：this指向的永远是对象，而不可能是函数
 ③：this指向的对象，叫做函数的上下文context，也叫函数的调用者。
 function func(){
			console.log(this);
		}
		  func();//指向window


this的无大指向


①：通过函数名（）调用的，this永远指向window


举个栗子：






function func(){
			console.log(this);
		}
		func();


function func1(){
			console.log(this);
		}
		func1();


// ①：通过函数名（）调用的，this永远指向window

        func();


画布跟js.oop






②：通过对象.方法调用的，this指向这个对象




//  ②：通过对象.方法调用的，this指向这个对象

        //狭义对象

        var obj={

            name:"zhangsan",

            func:func

        }

            obj.func()
画布跟js.oop


 




③：函数作为数组中的一个元素，用数组下标调用的，this指向这个数组




eg: var arr=[,,,func,,,];

               arr[]();


画布跟js.oop






④：函数作为window内置函数的回调函数使用，this指向window




setTimeout(function(){

            func();

        },);

         // ④：函数作为window内置函数的回调函数使用，this指向window

        setTimeout(func,)//指向window




⑤：函数作为构造函数，使用new关键字调用，函数指向新的new出的对象




var obj1=new func()


画布跟js.oop






我们来看一个栗子：




eg:

        var obj1={

            name:"obj1",

            arr:[func,,{name:"obj2",func:func},,]

        }
//下面两个例子分别指向谁

        obj1.arr[]();

        setTimeout(obj1.arr[],);

第一个显而易见，符合第三条


//最终调用者是数组，this->obj.arr
第二个例子里面的


obj1.arr[0]仅仅是取到数组中的第一个值，并不是指向数组，最终的调用者是setTimeout


直截了当的写法应该是


setTimeout(


func,2000);

最终指向WINDOW




在举一个更难得例子：




var fullname = 'John Doe';

    var obj = {

       fullname: 'Colin Ihrig',

       prop: {

          fullname: 'Aurelio De Rosa',

          getFullname: function() {

            return this.fullname;

          }

       }

    };

    console.log(obj.prop.getFullname()); 
//可以看出最终的调用者是;

    // 函数的最终调用者 obj.prop 
最终的指向结果是指向obj。prop这个数组
画布跟js.oop



    var test = obj.prop.getFullname;

    console.log(test());  
//显而易见使用函数（）进行的调用

    // 函数的最终调用者 test()  this-> window
画布跟js.oop


    obj.func = obj.prop.getFullname;

    console.log(obj.func());

    // 函数最终调用者是obj
//很明显符合对现象.方法调用指向这个obj对象

画布跟js.oop



    var arr = [obj.prop.getFullname,,];

    arr.fullname = "JiangHao";

    console.log(arr[]());

    // 函数最终调用者数组
画布跟js.oop


 




【 __proto__与prototype】
		1.prototype：函数的原型对象
		①:只有函数才有prototype，而且所有函数必有prototype
		②:prototype本身也是一个对象！
		③:prototype指上了当前函数所在的引用地址！
		2.__proto__：对象的原型！
		①：只有对象才有__proto__,而且所有对象必有__proto__
		②：__proto__也是一个对象，所以也有自己的__proto__，顺着这条线向上找的顺序，就是原型链。
		③:函数，数组都是对象，都有自己的__proto__
		3 实例化一个类，拿到对象的原理？
		实例化一个类的时候，实际上是将新对象的__proto__，指向构造函数所在的prototype
		也就是说  zhangsan.__proto__==Person.prototype √		
		4 所有对象的__proto__延原型链向上查找，都将指向Object的prototype。
		Object的prototype的原型，指向null
		【原型链的指向问题】
		研究原型链的指向，就是要研究各种特殊对象的__proto__的指向问题。
		1.通过构造函数，new出的对象，新对象的__proto__指向构造函数的prototype
		2函数的__proto__，指向Function()的prototype
		3函数prototype的__proto__指向Object的prototype
		（直接使用{}字面量声明，或使用new Object拿到的对象的__proto__直接指向Object的prototype）
		4 Object的prototype的__proto__，指向null
		（Object作为一个特殊函数，他的__proto__指向Function()的prototype）


是不是很蒙圈？？没事，在我们来个图，一目了然


画布跟js.oop
上一篇：C 语言学习 第一次作业总结

下一篇：Android实现播放GIF动画的强大ImageView