canvas教程

HTML5 Canvas教程:简介

字号+ 作者:H5之家 来源:H5之家 2017-03-10 10:02 我要评论( )

在绘画工具包中最重要的一个工具是画布(canvas)。在一个几乎无限的变化和组合之中,它给予开发者许多自由空间去表达各种的感情,效果,概念等等。这个自由的空

> 网页设计 > HTML5 >

HTML5 Canvas教程:简介 2016-12-24 13:58 出处:未知 人气: 

在绘画工具包中最重要的一个工具是画布(canvas)。在一个几乎无限的变化和组合之中,它给予开发者许多自由空间去表达各种的感情,效果,概念等等。这个自由的空间只可能被两件事所限制——他们的技术层次和想象力。

这种情况和在网页开发的世界有异曲同工之妙。随着HTML5的不断进步以及其强大的规模,网页开发者已经能够做出过去做不到的事情了。因为有一项叫做 HTML5 Canvas 技术的诞生,直接在浏览器上画图以及创建动画已经是完全有可能的了。

什么是 HTML5 Canvas?

canvas元素是一个在HTML代码中使用 width 和 height 属性定义的元素。然而,canvas元素真正地力量归功于 HTML5 Canvas API。这组API通过 JavaScript 代码来访问全套绘画函数,因此允许动态生成画面。

HTML5 Canvas 强大在哪里?

这里有些原因,你可能会想学习使用 HTML5 canvas 的特性:

  • 互动性。Canvas 是完全互动的. 他可以通过监听键盘,鼠标或者触摸事件来回应用户的动作。因此一个开发人员并不会被局限在静态绘图或者图片。

  • 动画。每一个画在 canvas 上的对象都是可动的。这允许在所有层次上创建动画,从简单的弹跳小球到复杂的 运动学正逆解 。

  • 灵活性。开发者可以用canvas创建任何东西。他可以展示线段,形状,文字,图片,等等 —— 包括或不包括动画。因此,添加视频或者音频到一个canvas应用也是可行的。

  • 浏览器/平台支持。所有  都支持HTML5 canvas,很多设备都支持,像桌面,平板和智能手机这样的。

  • 普及程度。Canvas的普及速度而又稳定地增长着,因此不会缺少资源。

  • 这是一个web标准。不像 Flash 和 Silverlight, canvas是HTML5开放技术的一部分。虽然并不是所有的浏览器都能实现它所有的特性,开发者能够肯定 canvas 的前途一片光明。

  • 只需一次开发,可以在跨平台运行。HTML5 canvas提供了极佳的可移植性。一旦创建了,不像 Flash 和 Silverlight,一个cavnas 应用能够在任何平台上运行——从大电脑到小手机设备。

  • 可免费获得的开发工具。创建HTML5 canvas应用的基本工具就是一个浏览器和一个好的编辑器。外加,有许多很赞的免费的库和工具用于帮助开发者制作先进的canvas开发。

  • 你可以用 HTML5 Canvas 创建什么样的应用

    canvas很赞。但是你究竟能用他做什么呢?让我们来瞅瞅。

  • 游戏。HTML5 Canvas 的特性设置对与开发所有类型的2D和3D游戏是理想的选择。

  • 广告。HTML5 Canvas 是Flash为基础的广告横幅和广告的极佳替代。吸引买家注意的所需的特性,它都拥有。

  • 数据表示。HTML5可以收集全局数据源并用canvas自动生成视觉吸引和互动的图表。

  • 教育与培训。HTML5 canvas 结合text, images, videos, 和 audio 产生高效而具有吸引力的学习体验。

  • 艺术与装饰。只要你有想象力和canvas各种各样的颜色,渐变,模式,透明,阴影和剪裁功能, 各种艺术和装饰图形都能绘画。

  • 现在知道为什么你需要学canvas了吧,让我们看看 HTML5 Canvas 的基础然后学习如何开始使用它。

    Canvas 渲染内容

    每个 HTML5 canvas 元素都要有个 context 。context 定义了你将使用的 HTML5 Canvas API。2d context是用于绘制2D图形和处理位图图像。3d context是用于三维图形的创建和操作。后者实际上被称为 WebGL ,是建立在 OpenGL ES 基础之上的。

    开始

    开始使用canvas,你所需要的就是一个代码编辑器和支持HTML5 canvas的浏览器。我使用的是SUblime和Chrome,你可以使用你想用的。

    我们的HTML看上去是这个样的:

    =>Your browser doesn’t currently support HTML5 Canvas. Please check caniuse.com/#feat=canvas for information on browser support for canvas.</p> <!-- OPTION 2: put fallback content (text, image, Flash, etc.) if the browser doesn't support canvas --> </canvas>

    这里是我们的 JavaScript,我们可以将此放在HTML页面的底部:

    var canvas = document.getElementById('exampleCanvas'), context = canvas.getContext('2d'); // code examples will continue here...

    默认情况下,即使在html中没有定义大小,浏览器默认创建一个宽300像素和高150像素的canvas元素。你可以通过定义 width 和 height 改变canvas尺寸,就像我在HTML中做的一样。

    注意,我们赋予了canvas id 的属性,我们将在JavaScript中用到。最后,如果你希望,你可以给canvas添加边框,使之通过一个框架可见。这不是必要的,只是用于帮我们看到canvas元素的边界。

    注意在 <canvas> 标签开闭和之间,我添加一段内容,如果浏览器不支持canvas,则显示这段内容。这可以是任何类型的内容,只要老浏览器支持。

    JavaScript从两行开始。在第一行,我创建了一个变量通过canvas元素的ID缓存它。第二行创建一个变量( context ),用 getContext() 函数引用canvas的2D context。我们会用 context 变量来获得canvas的所有绘画函数和属性。

    准备好了canvas,我们开始试验canvas API吧!但是在那之前,让我们来理清canvas的一些特性吧。

    HTML5 Canvas 尺寸 vs. 绘图尺寸

    除了 canvas 元素的 width 和 height 属性,你同样也可以用CSS来定义canvas元素的大小。然而通过SS改变一个canvas元素的大小和直接设置元素的 width 和 height 的属性是不一样的。这是因为一个canvas实际上有两个尺寸:元素本身的大小和元素绘图面积的大小。

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • canvas画饼状图

      canvas画饼状图

      2017-03-10 11:01

    • canvas 有没有大神会createjs,求教如何学习使用createjs

      canvas 有没有大神会createjs,求教如何学习使用createjs

      2017-03-10 08:01

    • 用HTML5的Canvas写字的例子

      用HTML5的Canvas写字的例子

      2017-03-10 08:00

    • TypeError: canvas is null

      TypeError: canvas is null

      2017-03-09 18:00

    网友点评