js运行效率在提升

编程语言的效率是前提，js自然比不上native的C语言效率，所以Canvas效率无疑比不上原生的2D图形绘制，但是js效率的提升是有目共睹的，以js与as为例，基本操作（运算操作，集合操作，Map操作）已经超越ActionScript，尤其是Google Chrome浏览器与as拉开了不小的距离，甚至某些方面超过java.

Canvas绘制效率不低

Canvas没有dom操作，只是简单的2D绘制，所以效率不低，Chrome浏览器下，每秒可绘制五万个基本图形元素（圆形，矩形或者线条），如果有阴影效果会慢很多，总的来说上万元素的绘制还是很轻松的

适合简单应用

因为简单，做一些像素处理，2D绘制，小游戏啥的还是很方便的，国际上有javascript 1k作品大赛（http://js1k.com/），用1024字节的js代码，实现丰富的效果，基本上都用到canvas，所以在轻量小巧方面很有优势

附上SVG与Canvas的适用范围

复杂应用借助第三方开发包

对于复杂应用，需要自己来解决无效区域，局部刷新，交互选中等功能，自己实现有些难度，这时候我建议借助第三方开发包

Canvas学习资料

http://www.w3.org/TR/2dcontext/

https://developer.mozilla.org/en/docs/HTML/Canvas

http://www.w3schools.com/html/html5_canvas.asp

第三方类库

KineticJS - kineticjs.com

EaselJS - www.createjs.com/#!/EaselJS

Qunee - qunee.com

Fabric.js - fabricjs.com

本文转载于:猿2048HTML5 Canvas绘制效率如何？

HTML5 Canvas绘制效率如何？的更多相关文章

  1. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  2. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  3. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  4. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  5. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  6. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  7. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  8. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  9. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

随机推荐

  1. Python：输入关键字进行百度搜索并爬取搜索结果

    学习自:手把手教你用Python爬取百度搜索结果并保存 - 云+社区 - 腾讯云 如何利用python模拟百度搜索,Python交流,技术交流区,鱼C论坛 指定关键字,对其进行百度搜索,保存搜索结果, ...

  2. c语言刷 设计题合计

    355. 设计推特 #define MAX_LEN 512 struct User { int userId; int followee[MAX_LEN]; // 散列表,0/1,1表示这个user被 ...

  3. 让Node.js支持ES6的语法

    使用命令,全局安装es-checker: cnpm install -g es-checker 安装好之后,执行以下命令来查看Node.js对ES6的支持情况. es-checker 可以从输出中查看 ...

  4. C#发送邮件，可带有Excel附件

    记录工作中遇到发邮件带附件的需求,新建控制台应用程序,目录下创建好所需要的定义好的Excel模板! class Program { static string newExcelPath = strin ...

  5. Linux环境下安装Java JDK

    一.说明 操作系统:CenterOS 7 工具:MobaXterm (根据个人喜好xshell等工具也行) 三.安装步骤 第一步:下载JDK 1.下载LInux环境下的jdk,请去 官网 中下载jdk ...

  6. tp5 全选，全不选 ，ajax批量删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. linux 内核以及mod

    linux设计为单内核,但是使用了 微内核的设计思想 内核相关的两个文件夹 /proc /sys 设定内核运行参数方法 echo VALUE > /proc/sys/To/SOMEFILE sy ...

  8. 拉普拉斯特征映射（Laplacian Eigenmaps）

    1 介绍 拉普拉斯特征映射(Laplacian Eigenmaps)是一种不太常见的降维算法,它看问题的角度和常见的降维算法不太相同,是从局部的角度去构建数据之间的关系.也许这样讲有些抽象,具体来讲, ...

  9. python练习册 每天一个小程序 第0009题

    1 ''' 2 题目描述: 3 找出一个html文件中所有的url 4 5 思路 : 6 利用正则表达式进行匹配 7 8 ''' 9 10 11 import re 12 13 14 with ope ...

  10. 浅析Redis基础数据结构

    Redis是一种内存数据库,所以可以很方便的直接基于内存中的数据结构,对外提供众多的接口,而这些接口实际上就是对不同的数据结构进行操作的算法,首先redis本身是一种key-value的数据库,对于v ...