创建Canvas块：
获取画布：var canvas = document.querySelector("#a");
获取画布的上下文： var ctx = canvas.getContext('2d');
canvas 起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。
(如果想让Canvas左右居中，必须设置display:block)
填充矩形：fillRect(x, y, width, height)
边框矩形：strokeRect(x, y, width, height)
结束路径：ctx.closePath();
开始一条路径：ctx.beginPath(X,Y);
确定起始点：ctx.moveTo(X,Y);
确定结束点：ctx.lineTo(X,Y); 设置颜色和线宽：
ctx.strokeStyle = 'green';
ctx.lineWidth = 5;
通过线条来绘制图形轮廓：stroke();
通过填充路径的内容区域生成实心的图形：fill();
清除画布：clearRect(X,Y,Width,Height)
画虚线：
for (var i = 0; i < 30; i++){
drawLine(100+10*i,100,105+10*i,100,'red',2)
}画随机统计图与圆弧：
for (var i = 0; i < 7; i++) {
var height = Math.random()*280+10;
}
填充颜色第一种：
ctx.fillStyle = '#' + parseInt(Math.random()*0xffffff).toString(16);
填充颜色第二种：
ctx.fillStyle = 'rgb('+parseInt(Math.random()*256)+','+ parseInt
(Math.random()*256)+','+parseInt(Math.random()*256)+')';
ctx.fillRect(120+40*i,400-height,20,height);
画圆：
ctx.arc(X,Y,radius,startAngle,endAngle,counterclockwise)
(坐标，半径，起始角度，结束角度，顺时针或逆时针)
然后着色：ctx.stroke(); .lineWidth可改线宽 .strokeStyle可改颜色
ctx.fillStyle可改内部填充颜色 -> 再填充 .ctx.fill();
实例：
var deg = Math.PI*2/360;
var count = 0;
var timer = setInterval(function(){
count ++;
ctx.beginPath();
ctx.arc(250,250,200,0,count*deg,false);
ctx.lineWidth = 5;
ctx.strokeStyle = '#f00';
ctx.stroke();
if (count==360){
clearInterval(timer);
}
},5); //此处的5);指的是setInterval的尾部 碰撞检测+重力实例：
setInterval(function() {
ctx.clearRect(0, 0, w, h);
if (y < 505 - r) {
ySpeed += g * .01 * .5;
ySpeed -= air * .8;
y = y + ySpeed*0.1;
}
if (y - r <= 0 || y + r > h) {
ySpeed = -ySpeed + 10;
}
drawcircle(x, y, r, false, 'red');
if (y > 505 - r) {
ctx.clearRect(0, 0, w, h);
drawcircle(x, 500-r, r, false, 'red');
}
}, 20);面向对象的小球：
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
prototype 属性允许您向对象添加新的属性和方法
new Object([value]) 以构造函数形式来调用
this 在面向对象语言中表示当前对象的一个引用
1.定义小球的基础参数：
function ball(){
this.x = r(500);
this.y = r(500);
this.r = r(90)+10 [10,100)
this.color = "#"+parseInt(Math.random()*0xffffff).toString(16);
this.xSpeed = r(3)+2; [2,5)
this.ySpeed = r(3)+1; [1,4)
} 2.定义小球的显示方式：
ball.prototype.show = function() {
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
ctx.fillStyle = this.color;
ctx.fill();
} 3.定义小球运动的方法（碰撞检测）：
见前文 要加上arr
4.多个小球的循环引用（放入小球数组） ：
var ballArr = [];
for (var i = 0; i < 5; i++){
var ball = new Ball();
ballArr.push(ball);
(push()方法向数组末尾添加一个或多个元素，并返回新的长度)
ball.show();
} 5.小球运动:
ctx.clearRect(0,0,w,h);
for (var i = 0; i < ballArr.length; i++){
var ball = ballArr.[i];
ball.run();
bal.show();
}
米字格和绘制图片：
font = Xpx 文本字体
textAlign = (start, end, left, right or center) 文本对齐选项
textBaseline = (top, hanging, middle, alphabetic, ideographic, bottom) 基线对齐选项
(https://www.runoob.com/tags/canvas-textbaseline.html)
Comments NOTHING