canvas

canvas 简介

1 HTML5 的一个元素，有兼容性

2 canvas是一块画布，本质是一张图片

canvas用途

1 代替flash，做各种动态效果和小游戏

canvas的属性和方法

canvas:默认大小 300*150

线默认宽度1px； 默认颜色黑色。绘制线条的时候，坐标对准线条的中心，所以线条为默认的1px的时候画面中的线条会出现模糊的效果，所以线条的宽度最后为偶数

1 设置宽度和高度在标签中设置
 <canvas width='600' height='400'></canvas>
 var canvas = document.querySelector('canvas');
 var ctx = canvas.getContext('2d); // 拿到绘制的工具
 
1 绘制线
 ctx.moveTo(100,100) // 确定起始位置 (x,y)
 ctx.lineTo(300,100) // 绘制的路径 但是看不到 (x,y)
 /** 样式会继承，但后面的样式会覆盖之前的样式
 	解决这个问题，使用 ctx.beginPath()开始新的路径 
 */
 ctx.closePath(); // 自动闭合 如果画三角形，还用画两条边，使用自动闭合即可不用画第三条边
 ctx.lineWidth = 2   // 设置线条的宽度
 ctx.lineCap = 'butt|round|square' // 线两边的样式
 ctx.lineJoin = 'miter|round|bevel' //两条线拐点的样式
 ctx.strokeStyle = 'red' // 设置线条的颜色 /**  还可以传 #fff/rgb()/rgba()/渐变方案  **/
 ctx.stroke() // 描边 (ctx.fill() //填充  ctx.fillStyle = 'red' //填充颜色) 把路径描述出来
  /**
    ctx.fill() 填充规则：非0填充规则
    顺时针+1 逆时针-1
  */
  
  1.1 其他样式的线条
  ctx.setLineDash([5]); // 设置虚线 虚线的长度是5 （[5,10] 长度5 10 5 10 ..../[5,10,15] 长度5  	10 15 ....）
  ctx.getLineDash() //	获取虚线的长度，获取的不重复的每条线段的长度集合
  1.2 线条的渐变颜色
  ctx.
  
2 画布相关属性
canvas.width/height //画布宽/高
ctx.canvas.width/height //画布宽/高

3 矩形绘制相关
ctx.rect(10,10,200,100) // canvas中x坐标位置 y坐标位置 矩形宽和高
ctx.stroke（）         
或者 ctx.strokeRect(10,10,200,100) / ctx.fillRect(10,10,200,100)
ctx.clearRect(10,10,10,10) // 清除矩形绘制内容 
 3.1 颜色渐变
  // 创建渐变方案 
 var linearGradient = ctx.createLinearGradient(100,100,400,100) // 起始x/y坐标;结束x/y坐标 确定坐标的长度和方向
 /** 0-1 相当于css中的0%-100% **/
 linearGradient.addColorStop(0,'red');
 linearGradient.addColorStop(0.5,'blue');
 linearGradient.addColorStop(1,'yellow);
 ctx.fillStyle = linearGradient;
 
 4 圆弧的绘制
 圆的整个弧度：2π
 圆的整个角度：360
 1角度 = π/180 弧度
  ctx.arc(40,40,20，0,Math.pI/3) // 圆心坐标x,y;圆的半径r;起始弧度；结束弧度；绘制方向(默认顺时针false/逆时针true)
  
 5 文本相关
 let text = 'hello';
 ctx.strokeText(text,100,100) // 文字内容，x位置，y位置   
 ctx.fillText(text,100,100)
 ctx.font = '40px 微软雅黑' // 文字大小 文字字体
 ctx.measureText(text).width // 获取文本宽度
 /** 文本对齐 定位的坐标默认在文本的左下角 
 	 文本的对齐方式都居于定位的坐标点
 **/
 ctx.textAlign = 'start'; // 左右对齐方式left(start) right(end) center
 ctx.textBaseline='alpha' // 上下对齐方式 bottom top middle
 
 6 图片
 	动态加载图片
        创建img元素，在内存中 一般用 6.2创建
  6.1	let img = document.createElement('img);
        img.src = '';
        // 图片加载完成
        img.onload = function(){}
  6.2   let img = new Image();
  		// 什么时候加载完成
  		/** onload事件写在 img.src 赋值前面的原因是
  			onload事件有兼容性问题，但不是代码本身的问题，在IE浏览器中，如果有缓存的情况下，在执行img.src之后就加载完成了，即不会在执行onload事件
  		**/
  	    img.onload = function(){
  	      // 第一种写法
           ctx.drawImage(image,0,0) // 画图片 
           		//图片对象 canvas中x坐标 、y坐标
           // 第二种写法
            ctx.drawImage(image,0,0,100,100,) 
            	//图片对象 canvas中x坐标 、y坐标 image图片的宽/高
           // 第三种写法
            ctx.drawImage(image,400,400,100,100,100,100,100,100);
            	// 图片对象； image图片上的x、y轴定位； 截取图片的尺寸 宽度、高度；canvas中x、y坐标 ； image绘制的大小
  	    }；
  	    // 执行这句代码已经去加载了
        img.src = '';
 
 7 变形  translate rotate scale 变形写于绘制前
 	ctx.translate(100,100) //  注意：移动的是整个坐标系
 	ctx.rotate(Math.PI/3) // 使用的是弧度 移动60度 
 	// 默认的旋转中心是坐标轴的原点 旋转过后，坐标系也会旋转
 	ctx.scale(1,2) // x、y轴方向的缩放
 	// 整个坐标系大小的缩放 内容缩放 + 坐标系缩放
 	ctx.strokeRect(100,100,100,100);
 	
 8 ctx.save() // 保存相关的样式和变形，  多个保存情况下，取的时候先进后出原则
   ctx.restore() // 取保存的样式和变形
   let imageStyle = ctx.createPatter(img,'no-repeat')
   ctx.strokeStyle = imageStyle
   
 9 动画
 三种动画控制器
 使用setTimeout和setInterval可能会出现掉帧，而requestAnimationFrame不会出现掉帧 
1 setTimeout // 时间控制是自己设置控制的
2 setInterval // 时间控制是自己设置控制的
3 requestAnimationFrame // 时间控制是通过浏览器控制的
 参数函数：浏览器在绘制页面的过程中是有自己的频率 （fps）当浏览器绘制的时候，会通知函数执行
 fps 一般浏览器的帧 1s 60次绘制
requestAnimationFrame(function(){
    
})

 10 碰撞函数 isPointInPath
 判断点是否在某一个路径内
 ctx.isPointInPath(x,y) // x,y 点坐标