html5 canvas常用api总结(一)

本文介绍了如何使用HTML5 Canvas元素进行绘图,包括监听浏览器加载事件、检查浏览器对Canvas的支持情况、包装console.log函数避免错误提示、动画循环方法以及Canvas的基本使用流程。

1.监听浏览器加载事件。

window.addEventListener("load",eventWindowLoaded,false);

load事件在html页面加载结束时发生。

第三个参数设置函数是否在事件传递到DOM对象树的底层对象之前捕捉此种类型的事件。

 

2.引入canvas方法

<canvas id="fcanvas" width="500" height="300">

Your browser does not support HTML5 canvas

</canvas>

判断浏览器是否支持canvas

(1)https://modernizr.com/

(2)使用函数判断

function canvas(){

    var canUse=!!document.createElement('canvas').getContext;

    if(!canUse){

    return;
    }

}

  

3.包装console.log函数,防止出现不支持此函数时的错误提示

var Debugger=function(){};
Debugger.log=function(message){
     try{
      console.log(message);  
    }catch(exception){
      return;        
  }
}

 

4.动画循环方法

(1)setTimeout

   

function gameLoop(){
   window.setTimeout(gameLoop,20);
   drawScreen() 
}
gameLoop();

 这种方式每次会清除自己,不会永远进行下去,比setInterval对性能更好。但是会出现如果某一帧需要大量计算,但是设置的时间并没有那么长,这样在进入下一帧动画的时候,这一帧并没有完成,这样会造成丢帧; 如果时间设置太长 =》不流畅、视觉卡顿的问题。

(2)requestAnimationFrame()

   这种方法是浏览器自动判断下一帧的渲染时间,不会跳帧、丢帧,但是并不是所有的浏览器都支持。

 根据浏览器的性能或者网速快慢来决定,它会保证绘制完这一帧,才会绘制下一帧,保证性能的同时,也保证动画的流畅。

 

5.使用canvas流程

(0)在html文件上创建canvas标签的DOM节点

(1)判断window是否加载完成。

(2)判断canvas是否支持。

(3)创建context对象

var iCanvas =document.getElementById("canvas");
var iContext=iCanvas.getContext("2d");

(4)开始画图。

 

 

以上是开始使用canvas时的准备,在下一篇将介绍canvas的常用api。 

转载于:https://www.cnblogs.com/zhangwenjiajessy/p/6108090.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值