Canvas 简介及适配

-----------最近做了一个项目用到canvas(移动端)之前没怎么用过，再此将canvas一些基本用法以及适配的坑分享出来---------------

1.canvas简介

 <canvas></canvas>是HTML5出现的新标签，像所有的Dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图。

IE9+支持；

2.基本知识：

context:是一个封装了很多绘图功能的对象，获取这个对象的方法是

var context =canvas.getContext("2d");

canvas元素绘制图像的时候有两种方法，分别是

context.fill()//填充

context.stroke()//绘制边框

context.fillStyle//填充的样式

context.strokeStyle//边框样式

context.lineWidth//图形边框宽度

绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)

清除矩形区域 context.clearRect(x,y,width,height)

圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)

路径 context.beginPath() context.closePath()

绘制线段 context.moveTo(x,y) context.lineTo(x,y)

线性渐变 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)

线性渐变颜色lg.addColorStop(offset,color)

绘制贝塞尔曲线（贝济埃、bezier） context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

绘制图像

绘图：context.drawImage

图像平铺：context.createPattern(image,type)

图像裁剪：context.clip()

像素处理：var imagedata=context.getImageData(sx,sy,sw,sh)

--------------------------------------------------------------------------------还有很多的知识点需要童鞋们自己去发掘，这里只是列举了常用的几个

   可以把Canvas比作一个坐标系,所有的元素通过设置坐标来决定其在坐标系中的位置.这个坐标系的原点并不是在中央,而是位于它的左上角.见下图

3.canvas适配

canvas怎么适配手机呢?今天小编就为大家讲一下canvas适配手机屏幕宽高度大小的方法吧，有需要的小伙伴可以一起来看看喔。

　　您的浏览器不支持HTML5 canvas，请换一个浏览器。

CSS设置canvas元素大小 与直接设置属性相比，其差别是基于这样一个事实：

canvas元素实际有两套尺寸。 
一个是元素本身大小， 
一个是元素绘图表面drawing surface的大小！ 

设置元素的width 和height 实际是同时设置 元素本身大小和 元素绘图表面的大小 

而CSS设置，只是元素大小，绘图表面不影响，依然是默认的 300X150px

但当canvas元素大小不符合绘图表面的大小时就会对 绘图表面进行缩放使得它符合元素的大小！

警告： 浏览器自动缩放Canvas 

通过width与height属性 而非CSS修改canvas元素的大小， 
使用CSS会导致浏览器缩放绘图表面(只是拉伸了绘图表面，本身的绘图表面仍然是300X150大小！)

----------适配响应式  -----------------------ps:width属性没有单位，默认px，不支持其他单位

移动端视口

移动端中分视觉视口和理想视口。 
视觉视口： 用户正在看到的网站的区域，我们可以通过缩放去操作视觉视口但是不会影响布局视口

理想视口，对设备来讲，是最理想的视口尺寸。 
显示在理想视口中的网站拥有最理想的宽度，不需要缩放。 
但只有当网站是手机（或者平板）的时候，才应该使用理想视口。

navigator.platform.indexOf("win")navigator.platform.indexOf("iPhone")navigator.platform.indexOf("Android") -----识别浏览器

pc端的时候一定用属性设置宽高，<canvas id="canvas" data-score="635" width="540" height="288"></canvas>

移动端时候：动态获取视口宽度，并用属性去动态设置；

var canvas = document.getElementById('canvas');    canvas.width=$('.aaaa').width();    canvas.height=$('.aaaa').height();  var  ctx = canvas.getContext('2d'),

canvas不支持rem单位，进行绘制的时候用百分比来达到适配的目的。

canvas中支持的字体与标签支持的字体不一致（移动端）,这是坑，使用时注意，不然会使用浏览器默认的字体。

----补充-------

canvas.save();和canvas.restore();是两个相互匹配出现的，作用是用来保存画布的状态和取出保存的状态的。

save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。

restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。

save和restore要配对使用（restore可以比save少，但不能多），如果restore调用次数比save多，会引发Error。

当我们对画布进行旋转，缩放，平移等操作的时候其实我们是想对特定的元素进行操作，比如图片，一个矩形等，但是当你用canvas的方法来进行这些操作的时候，其实是对整个画布进行了操作，那么之后在画布上的元素都会受到影响，所以我们在操作之前调用canvas.save()来保存画布当前的状态，当操作之后取出之前保存过的状态，这样就不会对其他的元素进行影响

var canvas = document.getElementById('Canvas');
      var context = canvas.getContext('2d');
  
  context.fillStyle='#FF3399'; // fillStyle 1
  
  context.save(); // pushed in LIFO stack (fillStyle 1)
     
context.fillRect(5,5,100,100);
     
context.fillStyle='#fa4b2a';// fillstyle 2
  
  context.save()  // pushed in LIFO stack(fillStyle 2)   
context.fillRect(150, 5, 100, 100);
     
  context.restore();// popped from LIFO stack(fillStyle 2)
context.fillRect(300, 5, 100, 100); 
     
  context.restore();// poped from LIFO stack(fillStyle 1 )
context.fillRect(450,5, 100, 100);    

效果如下：

save和restore之间，往往夹杂的是对Canvas的特殊操作。

canvas事件的处理

canvas对象是作为一个整体存在的，任何元素实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个元素或图形增加JavaScript 事件，你点击的是canvas的整个对象。

给Canvas元素绑定事件，然后 通过canvas内部的坐标去判断事件对象发生的位置，从而实现内部具体元素事件的处理。思路其实比较简单，但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率，有些地方还需要重新判断事件类型，

设置要重新定义一个Canvas内部的捕获和冒泡机制。

canvas .addEventListener('click', function(e){  //当click时运行
//判断坐标的具体位置
}, false);

canvas循环重绘

window.requestAnimationFrame()

方法用于告诉浏览器，你想在浏览器的下个重绘（repaint）之前来执行一个动画或者执行浏览器通过调用一个特定的函数来更新动画的请求。

该方法会在下次重回之前执行一个作为参数的回调函数。

注意：如果你想在下次重绘的时候激活另一帧，你就要在你的程序中自己调用requestAnimationFrame()方法。

不论在什么时候，如果你已经准备好了更新你屏幕上的动画你都应该调用这个方法。这会在浏览器的下次重绘之前调用你的动画函数。

执行回调函数的频率一般是60次/s，但在大多数的浏览器中通常也会按照W3C推荐的屏体刷新频率标准来匹配。

参数

回调函数

在下一帧的重绘的时候会制定一个回调函数作为参数来更新你的动画。

回调函数有一个参数，一个DOMHighResTimeStamp，它指明了requestAnimationFrame对回调函数进行调用的时间。

返回值

requestID是一个长整型值，唯一的标志了回调列表中的条目。

这是一个非零值，但是你不用担心这个值其他的信息。

你可以将这个值作为参数传递进window.cancelAnimationFrame()函数来取消对回调函数更新的请求。





------------------------------------------------------------------------------------------如有不足之处，欢迎指正---------------------------------