<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(, , , );
//第一个属性时距离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(, , , );

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

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

            cxt.fillRect(, , , );

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

            cxt.strokeStyle = "#00ff00";

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

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

            cxt.strokeRect(, , , );

            cxt.clearRect(, , , );

        }

</script>





效果图






画矩形




    <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>








画线




    <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>









画圆：




<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>








文字：




<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>








填充渐变：




<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>








旋转属性:




<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>








做一个综合项目：




<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  √函数本身也是对象




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


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








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




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

        //狭义对象

        var obj={

            name:"zhangsan",

            func:func

        }

            obj.func()


 




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




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

               arr[]();








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




setTimeout(function(){

            func();

        },);

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

        setTimeout(func,)//指向window




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




var obj1=new func()








我们来看一个栗子：




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这个数组



    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,,];

    arr.fullname = "JiangHao";

    console.log(arr[]());

    // 函数最终调用者数组


 




【 __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的更多相关文章
	

    
								
  1. js oop中的三种继承方法
		
    JS OOP 中的三种继承方法: 很多读者关于js opp的继承比较模糊,本文总结了oop中的三种继承方法,以助于读者进行区分. <继承使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方 ...
    
		
    2. 
						
  2. JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解
		
      前  言 JRedu 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于 ...
    
		
    3. 
						
  3. 关于Js OOP编程 创建对象的一些理解。
		
    面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物. 对象的含义          对象可以是汽车,人,动物,文字,表单或者任何存在的事物等等. 对象有: 属性----- ...
    
		
    4. 
						
  4. JS OOP -04 JS中的公有成员,私有成员和静态成员
		
    JS中的公有成员,私有成员和静态成员 a.实现类的公有成员 b.实现类的私有成员 c.实现类的静态成员 a.实现类的公有成员 之前定义的任何类型成员都属于公有成员的范畴,该类的任何实例都对外公开这些属 ...
    
		
    5. 
						
  5. JS OOP -03 JS类的实现
		
    JS类的实现: a.理解类的实现机制 b.使用prototype对象定义类成员 c.一种JS类的设计模式 a.理解类的实现机制 在JS中可以使用function关键字来定义一个类. 添加类的成员,在函 ...
    
		
    6. 
						
  6. JS OOP -02 深入认识JS中的函数
		
    深入认识JS中的函数: 1.概述,认识函数对象 2.函数对象和其他内部对象的关系 3.将函数作为参数传递 4.传递给函数的隐含参数:arguments 5.函数的apply,call方法和length ...
    
		
    7. 
						
  7. JS OOP -01 面向对象的基础
		
    JS面向对象的基础: 1.用定义函数的方式定义类 2.用new操作符获得一个类的实例 3.使用 [ ] 引用对象的属性和方法 4.动态添加,修改,删除对象的属性和方法 5.使用 { } 语法创建无类型 ...
    
		
    8. 
						
  8. JS OOP 概述
		
    JS面向对象,大致内容 1.面向对象的基础 2.深入认识JS的函数 3.JS类的实现 4JS中共有成员,私有成员和静态成员 5.JS的反射 6.JS的继承 7.JS实现抽象类 8.JS事件设计模式 9 ...
    
		
    9. 
						
  9. JS OOP编程
		
    //父类 function BaseFun() { var hello = "HelloWorld"; this.HelloPublic = "Hello--World& ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 转： 【Java并发编程】之五：volatile变量修饰符—意料之外的问题（含代码）
			
    转载请注明出处:     volatile用处说明     在JDK1.2之前,Java的内存模型实现总是从主存(即共享内存)读取变量,是不需要进行特别的注意的.而随着JVM的成熟和优化,现在在多线程 ...
    
			
    2. 
						
  2. 团队作业2--需求分析&原型设计
			
    一.需求分析 1.用户采访 a.采访对象:   分别对本学院同学.其他专业同学.部分老师等总计15人进行了采访调研: b.采访截图:    c.采访总结: (1).功能需求   能够将所提供的四个数进 ...
    
			
    3. 
						
  3. 软件工程HW1-四则运算软件
			
    题目描述 程序自动生成小学四则运算题目,用户输入每道题的答案之后,将答错的题目标出并计算此次答题的正确率. 项目链接 我的项目 项目运行截图 个人软件过程 此次开发的四个步骤: 1):需求分析 2): ...
    
			
    4. 
						
  4. Java实现Windows平台下Ping的最佳方法
			
    先上结论:通过调用系统自带的Ping命令来实现,使用exitValue()值来判断Ping的结果.按照惯例,0表示ok,1表示不通. private static void pingTest1() t ...
    
			
    5. 
						
  5. 201521145048《Java程序设计》第14周学习总结
			
    1. 本周学习总结 1.1 以你喜欢式(思维导图或其他)归纳总结多数据库相关内容. 1.数据库的定义:是为了实现一定目的按某种规则组织起来的"数据"的"集合". ...
    
			
    6. 
						
  6. 201521123004 《Java程序设计》第10周学习总结
			
    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 答: 异常的概念上周的思维导图大致体现,这周就归纳一下错误调试 由于多线程的内容比较散,我就直接用文字总结  ...
    
			
    7. 
						
  7. Rabbitmq集群安装配置
			
    Rabbitmq集群安装与配置 一.rabbitmq安装环境准备 1.安装环境准备 这里,我们以两个节点为例进行安装,一个节点为内存节点,另一个节点为硬盘节点,具体可根据自己需要分配节点. 安装系统  ...
    
			
    8. 
						
  8. （java web后端方向）如何让你的简历为你争取到更多的面试机会,内容来自java web轻量级开发面试教程
			
    我们在做培训时,会发现一个不合理的情况,一些程序员能力不错,在公司里也是技术牛人,但发出去的简历往往会石沉大海,没有回复.对于刚毕业的大学生或工作年限在2年之内的程序员,这个情况会更严重. 这种情况下 ...
    
			
    9. 
						
  9. Python: 列表注意细节与元组的基本用法
			
    列表注意细节: 1.list.clear():将列表中成员清空(与del list区别开) 2.list.copy():复制一份相同的列表(浅COPY,只复制列表第一层) 3.如果两个列表相等,如li ...
    
			
    10. 
						
  10. python 实现注册程序
			
    本文介绍用python实现一个模拟注册的程序,详细需求如下: # 写一个注册的程序,输入username,密码,密码确认,输入的账号和密码不能为空,两次输入密码必须一致,用户名不能重复,错误次数4次# ...
    
			
    11.