·您当前的位置:主页 > 技术教程 > Html5技术 >

HTML 5中的Canvas画布是什么?

时间:2017-08-31 18:10酷播
画布是一个可以在其上绘制图形的HTML区域。

画布是一个可以在其上绘制图形的HTML区域。

访问画布区域

要在画布区域上绘制图形,我们首先需要获取上下文的引用部分。下面就是用于画布部分的代码。

var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");

绘制图形

一旦你可以使用上下文对象,就可以开始上下文绘制。所以首先调用“move”方法,从一个点开始,使用线方法画线,然后敲击键盘应用结束。

<a name="WhatisthedifferencebetweenCanvasandSVGgraphics">What is the difference between Canvas and SVG graphics? </a>

注: 从前面的两个问题中我们可以看到画布和SVG都可以在浏览器上绘制图形。所以在这个问题上面试官可能会要你回答什么时候用哪个。

SVG Canvas
绘制并记忆。换句话说就是,通过使用SVG绘制的任意形状都可以被记住和操作,并且浏览器可以再次渲染它。
SVG可以很好地用于创建如CAD软件的图形,绘制之后允许用户操作。
这是一个缓慢的过程,因为它需要记住坐标以便于后续操作。
我们可以有与图形对象相关联的事件处理程序。
分辨率独立。
画布则是绘制然后遗忘。一旦绘制完成,你就不能访问和处理像素。
Canvas则用于绘制和遗忘类似动漫和游戏的场画。
它就快多了,因为没有必要记住后面的东西。我们不需要将事件处理程序与图形对象关联,因为我们不需要引用它们。
分辨率依赖。

热门文章

请稍候...
  • 热身双十一,锁定云视频大聚惠
  • 备战双十一,相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器