canvals

1，canvas 1本身就是h5的一个标签，该标签用来在html页面中圈出一块区域用来作为画布绘制图形,
2，兼容性：
如果浏览器不支持canvas标签，则会把该标签中的文本显示出来 ie8及之前的浏览器不支持
3，在设置画布尺寸时必须使用标签下的width和height属性，不能用css样式
<canvas id = 'canvas',width = 500px''height = '500px'>
你的浏览器不支持这个标签
</canvas>
开始绘制啦
//首先要获取到canvas标签
var canvas = document.querySelector('#canvas')
//创建画笔
var ctx= canvas.getContext('2d')
//调用beginPath（）开始绘制
ctx.beginPath();
//设置绘画的起始点
ctx.moveTo(100,100)
//设置绘画的经过点，最后一个坐标就是终点坐标
ctx.lineTo(200,200)
ctx.lineTo(300,100);
//用closePath()把起始点和终点连接起来
ctx.closePath()
//调用绘制方法绘制图案
ctx.strokeStyle = 'red'//改线框颜色的属性，在调用stroke（）前有效
ctx.lineWidth = 10;//修改线框粗细的属性
ctx.lineCap='round';//修改线框两端的样式
ctx.lineJoin='round';//修改途经点的交点样式
ctx.shadowColor='gray';
ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;
ctx.shadowBlur=5;
ctx.stroke();//用来描边的
// 在调用fill（）方法前设置填充样式
ctx.fillStyle='red';
ctx.fill();//用来填充的

//绘制矩形
var can=document.querySelector('#canvas');
var ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.strokeStyle='red';
ctx.strokeRect(10,10,100,300);
ctx.fillStyle='red';
// x,y,w,h
ctx.fillRect(150,50,100,300);
ctx.fillRect(50,150,300,100);
//绘制弧线
x,y,r,startAngle,endAngle,direction
//贝塞尔曲线
//清理画布
//定时器动画
requestAnimationFrame()h5提供的浏览器方法，由window调用，该方法接受一个函数作为参数，通过递归或者死循环让函数中的代码会被反服执行，该方法控制函数执行频率是显示器的刷新频率
function run() {
ctx.clearRect(0,0,500,500);
// 绘制新的一帧
x1+=speedX;
y1+=speedY;
ctx.beginPath();
ctx.arc(x1,y1,50,Math.PI/1800,Math.PI2,false);
ctx.stroke();
window.requestAnimationFrame(run);//控制执行时机
if (x1>=canvas.width-50) {
speedX=-1;
}
if (y1>=canvas.height-50) {
speedY=-1;
}
}
run();