我们能用HTML5 Canvas做什么?(html canvas api)

boyanx22小时前技术教程3

摘要:HTML5的Canvas元素称得上HTML5的核心技术所在。而作为一个依靠JavaScript绘制华丽图像的元素,Canvas究竟能够运用在哪些方面的开发?国外开发者Ohad Eder-Pressman为我们给出了8个精彩的答案。

最近在国外问答网站Quora上,许多开发者对于HTML5 Canvas元素的实用性进行了一系列探讨。Canvas非常灵活,能够很好地融合JavaScript代码并在浏览器内绘制华丽的图形。Canvas究竟具体能做些什么?3D3R公司创始人兼CEO Ohad Eder-Pressman的答案十分精彩,我们对其文字进行了翻译和整理,不妨一起来看一看。

图:用Canvas绘制的图形

什么是Canvas?

Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像。Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形。

Ohad Eder-Pressman

我们能用Canvas做些什么?

1. 游戏:毫无疑问,游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧,Ohad认为运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥更大的潜力。

2. 图表制作:图表制作时常被人们忽略,但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作,但Ohad认为大家完全可以用Canvas来实现。当然,使用SVG(可缩放矢量图形)来完成图表制作也是非常好的方法。

3. banner广告:Flash曾经辉煌的时代,智能手机还未曾出现。现在以及未来的智能机时代,HTML5技术能够在banner广告上发挥巨大作用,用Canvas实现动态的广告效果再合适不过。

4. 模拟器:Ohad认为,无论从视觉效果还是核心功能方面来说,模拟器产品可以完全由JavaScript来实现。

5. 远程计算机控制:Canvas可以让开发者更好地实现基于Web的数据传输,构建一个完美的可视化控制界面。

6. 字体设计:对于字体的自定义渲染将完全可以基于Web,使用HTML5技术进行实现。

7. 图形编辑器:Ohad预测,图形编辑器将能够100%基于Web实现。

8. 其他可嵌入网站的内容:类似图表、音频、视频,还有许多元素能够更好地与Web融合,并且不需要任何插件。Ohad呼吁大家继续挖掘Canvas的潜力,运用HTML5技术创造更多价值。

==============================

公众号:春树镇(互联网技术,文化,文学相关)

公众号:微膳食(营养健康养生相关)

研究讨论:互联网技术,php开发,网站建议,app开发,html5开发,设计,小说,电影,美食

标签: html转canvas

相关文章

利用JavaScript在canvas中画一棵树

看到这个网页中在canvas里绘制一棵树,感到很有趣,于是仿照他的源代码,同样也利用JavaScript生成了一棵树。在程序中需要两个对象Branch, BranchCollection。Branch...

Canvas学习笔记 | 多个示例详细讲述Canvas变形操作,干货

前言大家好,我是汪小成。最近在学习Canvas。这篇文章是我学习Canvas变形操作时记的笔记,欢迎大家审阅。简介在Canvas中有如下三个基本变形操作:图形平移:translate(x, y)图形缩...

好程序员:前端JavaScript全解析——Canvas绘制形状(上)

●今天,我们来通过 canvas 提供的方法开绘制一些简单的形状绘制矩形绘制基础矩形。下面一起看看好程序员老师的讲解吧~●语法 : 工具箱.rect( 矩形起点 x 轴坐标, 矩形起点 y 轴坐标,...

解决ios15系统的手机使用html2canvas截图页面空白崩溃

最近ios15系统推出了,公司的app开始测试ios15的兼容,然后就出现了有截图的页面卡顿白屏的问题。业务场景是这样,我们的每个页面都会有多个截图,截图使用的方式是html2canvas这个插件,1...

canvas是什么?前端中canvas 性能为何会比 html/css 好?

更底层的操作 (Direct Pixel Manipulation):Canvas 本质上是一个位图画布。开发者通过 JavaScript API(如 fillRect, drawImage, arc...

Nextoffer极客编程挑战#022:使用HTML5画布生成文字淡入淡出效果

给定如下HTML:<div id="container"><canvas id="MyCanvas" width="350" height="200">不支持HTML5画布&l...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。