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>
(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>
(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>
(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>
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);
}
- for–in是用来循环带有字符串key的对象的方法。key会变成字符串(String)类型。
- 包括数组的私有属性也可以打印出来,即循环不仅会遍历数组元素,还会遍历任意其他自定义添加的属性,如,
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 (中国标准时间)