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。

html5 canvas常用api总结(一)的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. html5 canvas常用api总结(二)--绘图API

    canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API. 绘画的时候canvas相当于画布,而 ...

  3. html5视频常用API接口

    一.虽然有的属性是boolean类型,但仍旧建议按照XHTML书写(属性名=”属性值”)格式,避免出现错误 (下面加粗的属性为常用属性) 属性 值 功能描述 controls controls 是否显 ...

  4. canvas常用api

    1. 在canvas标签中给出长宽(不带单位):<canvas width="600" height="600"></canvas> 或 ...

  5. 开源HTML5 Canvas游戏Runtime发布

    Cantk-Runtime是通用的HTML5 Canvas 2D游戏引擎运行库,让HTML5游戏的性能飞起来.Cantk-Runtime以PhoneGap插件的方式提供,从此结束PhoneGap低性能 ...

  6. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  7. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  8. Html5 学习系列(五)Canvas绘图API快速入门(2)

    Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...

  9. Html5 学习系列(五)Canvas绘图API快速入门(1)

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

随机推荐

  1. C++对C的函数拓展

    一,内联函数 1.内联函数的概念 C++中的const常量可以用来代替宏常数的定义,例如:用const int a = 10来替换# define a 10.那么C++中是否有什么解决方案来替代宏代码 ...

  2. Linux安装LAMP开发环境及配置文件管理

    Linux主要分为两大系发行版,分别是RedHat和Debian,lamp环境的安装和配置也会有所不同,所以分别以CentOS 7.1和Ubuntu 14.04做为主机(L) Linux下安装软件,最 ...

  3. ExtJS 4.2 业务开发(三)数据添加和修改

    接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个Ad ...

  4. 认识 Azure

    本文为官网摘录总结

  5. inline-block元素间距问题的几种解决方案

    不知道大家有没有碰到过设置了display:inline-block;的几个相邻元素之间有几px间距的问题,这里提供几种简单实用的解决方法,希望能够帮到大家!   方法1. 将<li>标签 ...

  6. await and async

    Most people have already heard about the new “async” and “await” functionality coming in Visual Stud ...

  7. 深入理解 Android 之 View 的绘制流程

    概述 本篇文章会从源码(基于Android 6.0)角度分析Android中View的绘制流程,侧重于对整体流程的分析,对一些难以理解的点加以重点阐述,目的是把View绘制的整个流程把握好,而对于特定 ...

  8. (资源整理)带你入门Spark

    一.Spark简介: 以下是百度百科对Spark的介绍: Spark 是一种与 Hadoop 相似的开源集群计算环境,但是两者之间还存在一些不同之处,这些有用的不同之处使 Spark 在某些工作负载方 ...

  9. Atitit 解决Unhandled event loop exception错误的办法

    Atitit 解决Unhandled event loop exception错误的办法 查看workspace/.metadata/.log org.eclipse.swt.SWTError: No ...

  10. Oracle 分页

    --1:无ORDER BY排序的写法.(效率最高) --(经过测试,此方法成本最低,只嵌套一层,速度最快!即使查询的数据量再大,也几乎不受影响,速度依然!) SELECT * FROM (SELECT ...