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

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

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

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

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

  1. <script type="text/javascript">
  2. function draw() {
  3. var c = document.getElementById("cancas");
  4. var cxt = c.getContext("2d");
    //

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

  1.  

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

  1. cxt.fillStyle = "#00ff00";
  2. cxt.fillRect(, , , );
    //第一个属性时距离x轴的距离,第二个是距离y轴的距离,第三第四个是宽度跟高度
  3. }
  4. </script>

  1.  

在做一个复杂的图形:

  1. <script type="text/javascript">
  2. function draw() {
  3. var c = document.getElementById("cancas");
  4. var cxt = c.getContext("2d");
  5. //红色区域,及其坐标
  6. cxt.fillStyle = "rgb(240,0,0)";
  7. cxt.fillRect(, , , );
  8. //在红色区域上面 添加一个灰色的区域,并且设置 透明度为 0.6
  9. cxt.fillStyle = "rgba(100, 100, 100, 0.6)";
  10. cxt.fillRect(, , , );
  11. //设置在最外面有一个绿色的只有边框的矩形
  12. cxt.strokeStyle = "#00ff00";
  13. cxt.lineWidth = ; //设置边框的宽度为 5
  14. //最后去掉 这个图形的中心。
  15. cxt.strokeRect(, , , );
  16. cxt.clearRect(, , , );
  17. }
  18. </script>

效果图

  1.  

画矩形

  1. <body>
  2. <canvas id="myCanvas" width="" height=""
  3. style="border:2px solid #000000;">
  4. </canvas>
  5. <script>
  6.  
  7. var c=document.getElementById("myCanvas");
  8. //然后,创建 context 对象:getContext("2d") 对象是内建的 HTML5 对象,
  9. //拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
  10. var ctx=c.getContext("2d");
  11. ctx.fillStyle="#FF0000";
  12. // fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
  13. ctx.fillRect(,,,);
  14.  
  15. </script>
  16.  
  17. </body>

  1.  

画线

  1. <body>
  2. <canvas id="myCanvas" width="" height=""
  3. style="border:2px solid #000000;">
  4. </canvas>
  5. <script>
  6.  
  7. var c=document.getElementById("myCanvas");
  8. //然后,创建 context 对象:getContext("2d") 对象是内建的 HTML5 对象,
  9. //拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
  10. var ctx=c.getContext("2d");
  11. //开始坐标
  12. ctx.moveTo(,);
  13. //结束坐标
  14. ctx.lineTo(,);
  15. ctx.strokeStyle="blue";
  16. ctx.stroke();
  17. </script>
  18.  
  19. </body>

  1.  

画圆:

  1. <body>
  2. <canvas id="myCanvas" width="" height=""
  3. style="border:2px solid #000000;">
  4. </canvas>
  5. <script>
  6.  
  7. var c=document.getElementById("myCanvas");
  8. //然后,创建 context 对象:getContext("2d") 对象是内建的 HTML5 对象,
  9. //拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
  10. var ctx=c.getContext("2d");
  11. ctx.fillStyle="red";
  12. ctx.beginPath();
  13. ctx.arc(,,,,*Math.PI,true);
  14. //画布的左上角坐标为0,0
  15. // x:圆心在x轴上的坐标
  16. // y:圆心在y轴上的坐标
  17. // r:半径长度
  18. // sAngle:起始角度,圆心平行的右端为0度
  19. // eAngle:结束角度
  20. //counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。
  21. //注意:Math.PI表示180°,画圆的方向是顺时针
  22. ctx.closePath();
  23. ctx.fill();
  24. </script>
  25. </body>

  1.  

文字:

  1. <body>
  2. <canvas id="myCanvas" width="" height=""
  3. style="border:2px solid #000000;">
  4. </canvas>
  5. <script>
  6.  
  7. var c=document.getElementById("myCanvas");
  8. //然后,创建 context 对象:getContext("2d") 对象是内建的 HTML5 对象,
  9. //拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
  10. var ctx=c.getContext("2d");
  11. ctx.font="30px 微软雅黑";
  12. //fillText(text,x,y) - 在 canvas 上绘制实心的文本
  13. ctx.fillText("Hello World",,);
  14. //strokeText(text,x,y) - 在 canvas 上绘制空心的文本
  15. ctx.strokeText("Hello World",,);
    //第一个属性是文字内容,第二个第三个属性是距离x ,y 轴的距离
  16. </script>
  17. </body>

  1.  

填充渐变:

  1. <body>
  2. <canvas id="myCanvas" width="" height=""
  3. style="border:2px solid #000000;">
  4. </canvas>
  5. <script>
  6. var c=document.getElementById("myCanvas");
  7. //然后,创建 context 对象:getContext("2d") 对象是内建的 HTML5 对象,
  8. //拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
  9. var ctx=c.getContext("2d");
  10. var grd=ctx.createLinearGradient(,,,);
  11. grd.addColorStop(,"#FF0000");
  12. grd.addColorStop(0.5,"#00FF00");
  13. grd.addColorStop(,"black");
  14. //范围为0-1,中间数字随便用用
  15. ctx.fillStyle=grd;
  16. ctx.fillRect(,,,);
  17. </script>
  18. </body>

  1.  

旋转属性:

  1. <body>
  2. <canvas id="myCanvas" width="" height=""
  3. style="border:2px solid #000000;">
  4. </canvas>
  5. <script>
  6. var c=document.getElementById("myCanvas");
  7. //然后,创建 context 对象:getContext("2d") 对象是内建的 HTML5 对象,
  8. //拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
  9. var context=c.getContext("2d");
  10.  
  11. context.fillStyle="red";
  12. context.fillRect(,,,)
  13.  
  14. context.transform(,0.5,-0.5,,,);
  15. context.fillStyle="orange";
  16. context.fillRect(,,,);
  17.  
  18. context.transform(,0.5,-0.5,,,);
  19. context.fillStyle="yellow";
  20. context.fillRect(,,,);
  21.  
  22. context.transform(,0.5,-0.5,,,);
  23. context.fillStyle="green";
  24. context.fillRect(,,,);
  25.  
  26. context.transform(,0.5,-0.5,,,);
  27. context.fillStyle="aliceblue";
  28. context.fillRect(,,,);
  29.  
  30. context.transform(,0.5,-0.5,,,);
  31. context.fillStyle="blue";
  32. context.fillRect(,,,);
  33.  
  34. context.transform(,0.5,-0.5,,,);
  35. context.fillStyle="darkmagenta";
  36. context.fillRect(,,,);
  37.  
  38. /* a 水平缩放绘图。
  39. b 水平倾斜绘图。
  40. c 垂直倾斜绘图。
  41. d 垂直缩放绘图。
  42. e 水平移动绘图。
  43. f 垂直移动绘图。*/
  44. </script>
  45. </body>

  1.  

做一个综合项目:

  1. <body>
  2. <canvas id="canvas" width="300px" height="300px" style="border: 1px solid"></canvas>
  3. <script>
  4. var canvas=document.getElementById("canvas");
  5. var ctx=canvas.getContext("2d");
  6. ctx.beginPath();
  7. // 两个大圆相交
  8. ctx.fillStyle="white";
  9. ctx.arc(,,,,*Math.PI/,false);
  10. ctx.fill();
  11. ctx.stroke();
  12. ctx.closePath();
  13.  
  14. ctx.beginPath();
  15. ctx.fillStyle="black";
  16. ctx.arc(,,,,*Math.PI/,true);
  17. ctx.fill();
  18. ctx.stroke();
  19. ctx.closePath();
  20. //两个小圆
  21. ctx.beginPath();
  22. //ctx.restore(90*Math.PI/180);
  23. //返回之前保存过的路径状态和属性。
  24. ctx.fillStyle="black";
  25. ctx.arc(,,,,*Math.PI/);
  26. ctx.fill();
  27. ctx.stroke();
  28. ctx.closePath();
  29. ctx.beginPath();
  30. // ctx.restore(90*Math.PI/180);
  31. //返回之前保存过的路径状态和属性。
  32. ctx.fillStyle="white";
  33. ctx.arc(,,,,*Math.PI/);
  34. ctx.fill();
  35. ctx.stroke();
  36. ctx.closePath();
  37.  
  38. ctx.beginPath();
  39. ctx.fillStyle="white";
  40. ctx.arc(,,,,*Math.PI/,true);
  41. ctx.fill();
  42. ctx.stroke();
  43. ctx.closePath();
  44. ctx.beginPath();
  45. ctx.fillStyle="black";
  46. ctx.arc(,,,,*Math.PI/);
  47. ctx.fill();
  48. ctx.stroke();
  49. ctx.closePath();
  50. </script>
  51. </body>
    //自己插入代码,看看是什么东西

杨辉三角

  1. /* 1 1 1
  2. 121 2 2
  3. 12321 3 3
  4. 1234321 4 4
  5. 123454321 5 5*/
  6. for (var i=;i<=;i++){
  7. for(var j=;j<=-i;j++){
  8. document.write("&nbsp")
  9. }
  10. //递增
  11. num=;
  12. for (var k=;k<=i;k++){
  13. document.write(num)
  14. num++
  15. }
  16. //递减
  17. num -=;
  18. for(var l=;l<=i-;l++){
  19. document.write(num)
  20. num--
  21. }
  22. document.write("<br>")
  23. }

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

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

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

  1. function Person(name,age){
  2. this.name=name;
  3. this.age=age;
  4. this.say=function(content){
  5. //在类中,访问类的自身的属性,必须使用this.属性调用
  6. alert("我叫"+this.name+",今年"+this.age+"岁啦!我说了一句话:"+content)
  7. }
  8.  
  9. }
  10.  
  11. //通过赋值打印

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

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

  1.  

①: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(){}//私有方法
 }
 私有属性跟私有方法的作用域,只鞥在构造函数内容有效,即,只能在构造函数内部使用;

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

  1. function Person(name){
  2. this.name=name;//声明成员属性,
  3. var sex="男";//私有属性
  4. this.sayTime=function(){
  5. alert("我说了当前时间是"+getTime());
  6. }
  7. this.writeTime=function(){
  8. alert("我写了当前时间是"+getTime());
  9. }
  10. function getTime(){//私有方法
  11. return new Data();
  12. }
  13. }
  14.  
  15. var zhangsan=new Person("张三")
  16. zhangsan.age=;//追加成员属性
  17. /*alert(zhangsan.name)
  18. alert(Person.name)*/
  19. /*alert(zhangsan.age);*///调用成员属性
  20. Person.count="60亿";//声明静态属性
  21. console.log(Person.count);//调用静态属性
  22. var lisi=new Person("李四");
  23. console.log(lisi.count)//Undefined静态属性是属于类的,只能由类名调用
  24.  
  25. console.log(lisi.count);//undefined 静态属性时属于类的,只能用类名调用
  26.  
  27. console.log(lisi.sex);
  28. console.log(Person.count);

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

this的无大指向

①:通过函数名()调用的,this永远指向window

举个栗子:

  1.  

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

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

  1. // ①:通过函数名()调用的,this永远指向window
  2. func();

  1.  

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

  1. // ②:通过对象.方法调用的,this指向这个对象
  2. //狭义对象
  3. var obj={
  4. name:"zhangsan",
  5. func:func
  6. }
  7. obj.func()
  1.  

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

  1. eg: var arr=[,,,func,,,];
  2. arr[]();

  1.  

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

  1. setTimeout(function(){
  2. func();
  3. },);
  4. // ④:函数作为window内置函数的回调函数使用,this指向window
  5. setTimeout(func,)//指向window

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

  1. var obj1=new func()

  1.  

我们来看一个栗子:

  1. eg:
  2. var obj1={
  3. name:"obj1",
  4. arr:[func,,{name:"obj2",func:func},,]
  5. }
    //下面两个例子分别指向谁
  6. obj1.arr[]();
  7. setTimeout(obj1.arr[],);
  8.  
  9. 第一个显而易见,符合第三条
  1. //最终调用者是数组,this->obj.arr
    第二个例子里面的
  1. obj1.arr[0]仅仅是取到数组中的第一个值,并不是指向数组,最终的调用者是setTimeout
  1. 直截了当的写法应该是
  1. setTimeout(
  1. func,2000);
  2.  
  3. 最终指向WINDOW

在举一个更难得例子:

  1. var fullname = 'John Doe';
  2. var obj = {
  3. fullname: 'Colin Ihrig',
  4. prop: {
  5. fullname: 'Aurelio De Rosa',
  6. getFullname: function() {
  7. return this.fullname;
  8. }
  9. }
  10. };
  11. console.log(obj.prop.getFullname());
    //可以看出最终的调用者是;
  12. // 函数的最终调用者 obj.prop
    最终的指向结果是指向objprop这个数组
  1.  
  2. var test = obj.prop.getFullname;
  3. console.log(test());
    //显而易见使用函数()进行的调用
  4. // 函数的最终调用者 test() this-> window
  1. obj.func = obj.prop.getFullname;
  2. console.log(obj.func());
  3. // 函数最终调用者是obj
    //很明显符合对现象.方法调用指向这个obj对象
  4.  
  1.  
  2. var arr = [obj.prop.getFullname,,];
  3. arr.fullname = "JiangHao";
  4. console.log(arr[]());
  5. // 函数最终调用者数组
  1.  

【 __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. JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解

      前  言 JRedu 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于 ...

  3. 关于Js OOP编程 创建对象的一些理解。

    面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物. 对象的含义          对象可以是汽车,人,动物,文字,表单或者任何存在的事物等等. 对象有: 属性----- ...

  4. JS OOP -04 JS中的公有成员,私有成员和静态成员

    JS中的公有成员,私有成员和静态成员 a.实现类的公有成员 b.实现类的私有成员 c.实现类的静态成员 a.实现类的公有成员 之前定义的任何类型成员都属于公有成员的范畴,该类的任何实例都对外公开这些属 ...

  5. JS OOP -03 JS类的实现

    JS类的实现: a.理解类的实现机制 b.使用prototype对象定义类成员 c.一种JS类的设计模式 a.理解类的实现机制 在JS中可以使用function关键字来定义一个类. 添加类的成员,在函 ...

  6. JS OOP -02 深入认识JS中的函数

    深入认识JS中的函数: 1.概述,认识函数对象 2.函数对象和其他内部对象的关系 3.将函数作为参数传递 4.传递给函数的隐含参数:arguments 5.函数的apply,call方法和length ...

  7. JS OOP -01 面向对象的基础

    JS面向对象的基础: 1.用定义函数的方式定义类 2.用new操作符获得一个类的实例 3.使用 [ ] 引用对象的属性和方法 4.动态添加,修改,删除对象的属性和方法 5.使用 { } 语法创建无类型 ...

  8. JS OOP 概述

    JS面向对象,大致内容 1.面向对象的基础 2.深入认识JS的函数 3.JS类的实现 4JS中共有成员,私有成员和静态成员 5.JS的反射 6.JS的继承 7.JS实现抽象类 8.JS事件设计模式 9 ...

  9. JS OOP编程

    //父类 function BaseFun() { var hello = "HelloWorld"; this.HelloPublic = "Hello--World& ...

随机推荐

  1. 数据结构学习:KMP模式匹配算法

    有关KMP的算法具体的实现网上有很多,不具体阐述.这里附上c的实现. 谈谈我自己的理解.KMP相较于朴素算法,其主要目的是为了使主串中的遍历参数i不回溯,而直接改变目标串中的遍历参数j. 比如说要是目 ...

  2. C# XmlDocument操作XML

    XML:Extensible Markup Language(可扩展标记语言)的缩写,是用来定义其它语言的一种元语言,其前身是SGML(Standard Generalized Markup Lang ...

  3. [转载]GIF、JPEG 和 PNG的区别在哪里?

    原文地址:GIF.JPEG 和 PNG的区别在哪里?作者:苗得雨 GIF.JPEG 和 PNG 是三种最常见的图片格式. GIF:1987 年诞生,常用于网页动画,使用无损压缩,支持 256 种颜色( ...

  4. HTML5 贝塞尔绘画 桃心

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JAVA基础第一组(前5道题)

    1.[程序1] 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一 对兔子,假如兔子都不死,问每个月的兔子总数为多少?        1.程序分析: 兔 ...

  6. 个人作业2—英语学习APP案例分析

    第一部分 调研, 评测 1.下载并使用,描述最简单直观的个人第一次上手体验. 一打开就受到暴击! 界面布局与大部分学习类APP类似,功能模块.搜索框跟一些日常推送.界面简单功能一目了然,方便操作. 2 ...

  7. 团队作业4——第一次项目冲刺(Alpha版本) Day3

    1.由于大家课程都比较多,时间紧迫,今天最后一节课下课完在教室召开了简短的站立式会议,会议照片如下: 2.Leangoo任务分解图: 3.每个人的工作: 队员 今天已完成的工作 明天计划完成的工作 林 ...

  8. Java学习2——HelloWorld(编写第一个java程序)

    编写 在自己的工作文件目录下(如上一篇中配置的classpath路径)创建HelloWorld.java文件,编写如下代码,并保存 public class HelloWorld { public s ...

  9. 201521123037 《Java程序设计》第3周学习总结

    1. 本周学习总结 链接:http://naotu.baidu.com/file/026a646bb4031d4238accc69cdf53272 2. 书面作业 1. 代码阅读 public cla ...

  10. 201521123060 《Java程序设计》第12周学习总结

    1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2.书面作业 将Student对象(属性:int id, String name,int age,double ...