畫布跟js.oop

本文轉載自查看原文 2017-10-14 18:08 225

<Canvas> 是HTML5中新出現的一個元素。就是可以通過 JS繪制圖形。

畫布(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(0, 0, 150, 150);
//第一個屬性時距離x軸的距離，第二個是距離y軸的距離，第三第四個是寬度跟高度

        }
</script>

在做一個復雜的圖形：

 <script type="text/javascript">
        function draw() {
            var c = document.getElementById("cancas");
            var cxt = c.getContext("2d");
            //紅色區域，及其坐標
            cxt.fillStyle = "rgb(240,0,0)";
            cxt.fillRect(50, 50, 160, 160);
            //在紅色區域上面 添加一個灰色的區域，並且設置 透明度為 0.6
            cxt.fillStyle = "rgba(100, 100, 100, 0.6)";
            cxt.fillRect(30, 30, 200, 200);
            //設置在最外面有一個綠色的只有邊框的矩形
            cxt.strokeStyle = "#00ff00";
            cxt.lineWidth = 5;   //設置邊框的寬度為 5
            //最后去掉 這個圖形的中心。
            cxt.strokeRect(30, 30, 200, 200);
            cxt.clearRect(80, 80, 100, 100);
        }
</script>

效果圖

畫矩形

    <body>
         <canvas id="myCanvas" width="570" height="570"
  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(200,100,300,200); 
         
</script>


    </body>

畫線

    <body>
         <canvas id="myCanvas" width="570" height="570"
  style="border:2px solid #000000;">
</canvas>
<script>
    

var c=document.getElementById("myCanvas");
        //然后，創建 context 對象：getContext("2d") 對象是內建的 HTML5 對象，
        //擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
           var ctx=c.getContext("2d");
           //開始坐標
          ctx.moveTo(100,100);
          //結束坐標
          ctx.lineTo(200,100);
            ctx.strokeStyle="blue";
       ctx.stroke(); 
</script>


    </body>

畫圓：

<body>
         <canvas id="myCanvas" width="570" height="570"
  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(70,18,15,0,2*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>

文字：

<body>
         <canvas id="myCanvas" width="570" height="570"
  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",100,100);     
        //strokeText(text,x,y) - 在 canvas 上繪制空心的文本
      ctx.strokeText("Hello World",100,200);
//第一個屬性是文字內容，第二個第三個屬性是距離x ,y 軸的距離
</script>
    </body>

填充漸變：

<body>
         <canvas id="myCanvas" width="570" height="570"
  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(0,0,175,50);   
     grd.addColorStop(0,"#FF0000");
     grd.addColorStop(0.5,"#00FF00");
     grd.addColorStop(1,"black");
    //范圍為0-1，中間數字隨便用用
    ctx.fillStyle=grd;
    ctx.fillRect(0,0,175,50);
</script>
    </body>

旋轉屬性:

<body>
         <canvas id="myCanvas" width="570" height="570"
  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(0,0,250,100)

context.transform(1,0.5,-0.5,1,80,10);
context.fillStyle="orange";
context.fillRect(0,0,250,100);

context.transform(1,0.5,-0.5,1,80,10);
context.fillStyle="yellow";
context.fillRect(0,0,250,100);

context.transform(1,0.5,-0.5,1,80,10);
context.fillStyle="green";
context.fillRect(0,0,250,100);

context.transform(1,0.5,-0.5,1,80,10);
context.fillStyle="aliceblue";
context.fillRect(0,0,250,100);

context.transform(1,0.5,-0.5,1,80,10);
context.fillStyle="blue";
context.fillRect(0,0,250,100);

context.transform(1,0.5,-0.5,1,80,10);
context.fillStyle="darkmagenta";
context.fillRect(0,0,250,100);

 /*    a    水平縮放繪圖。
b    水平傾斜繪圖。
c    垂直傾斜繪圖。
d    垂直縮放繪圖。
e    水平移動繪圖。
f    垂直移動繪圖。*/
</script>
    </body>

做一個綜合項目：

<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(150,150,150,0,180*Math.PI/180,false);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.fillStyle="black";
    ctx.arc(150,150,150,0,180*Math.PI/180,true);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
    //兩個小圓
    ctx.beginPath();
    //ctx.restore(90*Math.PI/180);
    //返回之前保存過的路徑狀態和屬性。
    ctx.fillStyle="black";
    ctx.arc(76,150,75,0,180*Math.PI/180);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
   // ctx.restore(90*Math.PI/180);
    //返回之前保存過的路徑狀態和屬性。   
    ctx.fillStyle="white";
    ctx.arc(76,150,20,0,360*Math.PI/180);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.fillStyle="white";
    ctx.arc(227,150,75,0,180*Math.PI/180,true);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle="black";
    ctx.arc(227,150,20,0,360*Math.PI/180);
    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=1;i<=10;i++){
            for(var j=1;j<=5-i;j++){
                document.write("&nbsp")
            }    
        //遞增
        num=1;
        for (var k=1;k<=i;k++){
            document.write(num)
            num++
        }
        //遞減
        num -=2;
        for(var l=1;l<=i-1;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 √函數本身也是對象

【靜態屬性跟靜態方法】：

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=14;//追加成員屬性
          /*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();

②：通過對象.方法調用的，this指向這個對象

//  ②：通過對象.方法調用的，this指向這個對象
        //狹義對象
        var obj={
            name:"zhangsan",
            func:func
        }
            obj.func()

③：函數作為數組中的一個元素，用數組下標調用的，this指向這個數組

eg: var arr=[1,2,3,func,4,5,6];        
               arr[3]();

④：函數作為window內置函數的回調函數使用，this指向window

setTimeout(function(){
            func();
        },1000);
         // ④：函數作為window內置函數的回調函數使用，this指向window 
        setTimeout(func,1000)//指向window

⑤：函數作為構造函數，使用new關鍵字調用，函數指向新的new出的對象

var obj1=new func()

我們來看一個栗子：

eg:
        var obj1={
            name:"obj1",
            arr:[func,1,{name:"obj2",func:func},3,4]
        }
//下面兩個例子分別指向誰
        obj1.arr[0]();
        setTimeout(obj1.arr[0],2000);

第一個顯而易見，符合第三條

//最終調用者是數組，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這個數組



    
    var test = obj.prop.getFullname;
    console.log(test());  
//顯而易見使用函數（）進行的調用
    // 函數的最終調用者 test()  this-> window



    obj.func = obj.prop.getFullname;
    console.log(obj.func()); 
    // 函數最終調用者是obj
//很明顯符合對現象.方法調用指向這個obj對象



    
    var arr = [obj.prop.getFullname,1,2];
    arr.fullname = "JiangHao";
    console.log(arr[0]());
    // 函數最終調用者數組

【 __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）

是不是很蒙圈？？沒事，在我們來個圖，一目了然

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS OOP編程 js---OOP淺談什么是oop js畫布組件(

) OOP fabric.js點擊按鈕放大縮小畫布以及畫布內容 JS面向對象思想（OOP） JS 將canvas畫布保存到本地不會JS中的OOP，你也太菜了吧！(第二篇) 關於Js OOP編程創建對象的一些理解。