2018-07-24 学习总结

1.canvas基本图形绘制

(1)直线段

<canvas id="myCanvas" width="500px" height="300px"> </canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var cxt = canvas.getContext("2d");
    cxt.moveTo(20,20);
    cxt.lineTo(100,100);
    cxt.stroke();
</script>
image.png

(2).圆形

<canvas id="myCanvas" width="500px" height="300px"> </canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var cxt = canvas.getContext("2d");
    cxt.beginPath();
    cxt.arc(100,100,50,0,2*Math.PI,true);//六个参数,(x,y,r,stratrad,endrad,旋转方向)
    cxt.closePath();
    cxt.fillStyle = "#6688c6";//填充颜色
    cxt.fill();//填充
</script>
image.png

(3)圆弧

<body>
<canvas id="myCanvas" width="500px" height="300px"> </canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var cxt = canvas.getContext("2d");
    cxt.beginPath();
    cxt.arc(100,100,50,0,0.6*Math.PI,true);//六个参数,(x,y,r,stratrad,endrad,旋转方向)
    cxt.closePath();
    cxt.stroke();//实线
</script>
image.png

(4).图片

<canvas id="myCanvas" width="600px" height="500px" style="border:1px solid #000000;"> </canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var cxt = canvas.getContext("2d");
    var img = new Image();
    img.src="image/13.jpg";
    cxt.drawImage(img,60,60);
</script>
image.png
2.for-in ,for-of ,forEach的区别

(1)for循环

for(let i=0;i<arr.length;i++){
    console.log(arr[i]);
}

(2)forEach

arr.forEach(function(i){
    console.log(item);
});

forEach写法简单,遍历所有元素,但不能中断循环,不能使用break或者return来结束循环
(3)for in

for(let key in arr){
    console.log(key);
}
  1. for–in是用来循环带有字符串key的对象的方法。key会变成字符串(String)类型。
  2. 包括数组的私有属性也可以打印出来,即循环不仅会遍历数组元素,还会遍历任意其他自定义添加的属性,如,arr上面包含自定义属性,arr.b,那这次循环中也会出现此b属性。

(4)for of

for(let val of arr){
    console.log(val);
}

可以使用 break, continue 和 return, 并且是值of数组(不能遍历对象)。可以进行数组的遍历,字符串的遍历 ,可以避免所有 for-in 循环的陷阱 。

3.函数声明与函数表达式

(1).函数声明:
可以定义命名的函数变量,而无需给变量赋值,必须以function 开头。
函数声明可以提前被解析出来。表达式不可以。
function aaa(){}(); // 不可以执行。必须得通过函数名调用 aaa();

function ber (){
     return 0;
}

比如,只要你声明过函数,不管函数是在哪个位置声明的,它都会被提前解析出来,所以在任何地方调用都不会有问题。但是函数表达式不会被提前解析,所以你能在函数表达式之前就调用它。

(2).函数表达式:
将函数定义为表达式语句(通常是变量赋值)的一部分。定义的函数可以是命名的,也可以是匿名的,不能以function开头。
函数表达式可以直接后面加括号执行 而函数声明是不可以。
var a = function aaa(){} (); // 加括号就可以直接执行

var a =function ber(){
       return 0;
}
3.Date
var time = new Date();
var now = new Date();
now; //Tue Jul 24 2018 14:40:31 GMT+0800 (中国标准时间)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份,**注意月份范围是0~11,5表示六月**
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳

var  d = new Date(2018,6,24,14,35,12,231);
    console.logTue Jul 24 2018 14:35:12 GMT+0800 (中国标准时间)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容