Canvas-入门

定义

canvas是HTML5新增的一个重要元素,先看下它的定义:

<canvas> is an HTML element which can be used to draw graphics using scripting (usually JavaScript).
This can, for instance, be used to draw graphs, make photo composition or simple (and not so simple) animations.

大意:

使用JS脚本可以绘制图形、简单的动画

注:canvas只是一个普通无色透明区域可理解为画布,同时绘制图形不是用鼠标,而是用JS脚本。

因为是新增元素,兼容性方面如下:

页面添加canvas

<canvas id="j-canvas" width="400" height="300">
    不支持canvas
</canvas>

注:

  1. 对不支持的浏览器显示,”不支持canvas”文案
  2. canvas不像img标签,canvas需要结束标签 < /canvas>
  3. canvas可以应用border、background-color、margin等属性
  4. canvas在没有指定宽高时,默认300 * 150

操作canvas

// 获得canvas
var canvas = document.getElementById('j-canvas');
// 获得画布
var ctx = canvas.getContext('2d');

检测支持性

var canvas = document.getElementById('j-canvas');

if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
  // 支持处理
} else {
    // 不支持处理
}

坐标系

既然我们要在canvas上画东西,肯定要知道画的位置,所以就牵扯到坐标系的东西。
在canvas中坐标系分2D、3D坐标系统,除了默认的还有 坐标系转换。我们这次只探讨2D默认坐标系:

“节流函数”提高性能

浏览器中DOM操作比起非DOM交互需要更多的内存和CUP时间,连续的DOM操作有可能会导致浏览器挂起,甚至崩溃。尤其IE中的onresize事件。
高频率的更改会让浏览器崩溃。为了绕开这个问题,需要使用定时器对此类处理函数进行节流

函数节流背后的基本思想:某些代码不可以在没有间隔的情况下连续重复执行

节流函数实现一般实现:1,定时器控制开关,2.定时清除定时器。

1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var throttle = {
switch:false,
timer:100,
process:function(method,context){
var self = this;
if(self.switch){
return;
}
self.switch = true;
setTimeout(function(){
self.switch = false;
method.call(context);
},self.timer);
}
}

2.

1
2
3
4
5
6
function throttle(method,context){
clearTimeout(method.flag);
method.flag = setTimeout(function(){
method.call(context);
},100);
}

适用场景:scroll,resize事件还有输入联想词等高频事件。

参考:

https://www.nczonline.net/blog/2007/11/30/the-throttle-function/

https://gist.github.com/derek-watson/3349917