文章标签:Canvas

找到 24 篇文档

  • Games/Tutorials This page contains multiple tutorial series that highlight different workflows for effectively ...
  • Games/Tutorials/2D_Breakout_game_pure_JavaScript 在这里我们将完全使用JavaScript语言基于HTML5的canvas标签,一步一步的绘制一个简单的MDN消除游戏。
  • Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball 从上一节中你已经知道如何去绘制一个球。现在让我们使它动起来。从技术上讲,我们将在画布上绘制一个球,之后让它消失,然后在一个稍微不用的位置上再绘制一个一样的球。就想电影里的每一帧动起来的感觉。
  • Glossary/Canvas HTML 的 canvas 元素提供了一个空白绘图区域,可以使用 APIs (比如 Canvas 2D 或 WebGL )来绘制图形。
  • Web/API/CanvasRenderingContext2D/drawImage CanvasRenderingContext2D .drawImage() 是 Canvas 2D API 中的方法,它提供了多种方式来在Canvas上绘制图像。
  • Web/API/CanvasRenderingContext2D/imageSmoothingQuality CanvasRenderingContext2D.imageSmoothingQuality 是 Canvas 2D API, 用于设置图像平滑度的属性。
  • Web/API/Canvas_API canvas 是 HTML5 新增的元素,可用于通过使用 JavaScript 中的脚本来绘制图形。例如,它可以用于绘制图形,制作照片,创建动画,甚至可以进行实时视频处理或渲染。
  • Web/API/Canvas_API/A_basic_ray-caster 查看现场演示 .
  • Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas 将 DOM 内容(如 HTML )绘制到 canvas 中是可行的,尽管这不常见(出于安全原因)。这篇文章源自 Robert O'Callahan 的 博客 ,讲述如何按照规范安全地实现这个功能。
  • Web/API/Canvas_API/Tutorial canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 ...
  • Web/API/Canvas_API/Tutorial/Advanced_animations 我们将会画一个小球用于动画学习,所以首先作球于 canvas(画布)。下面的代码帮助我们建立画布。
  • Web/API/Canvas_API/Tutorial/Applying_styles_and_colors 到目前为止,我们只看到过绘制内容的方法。如果我们想要给图形上色,有两个重要的属性可以做到: fillStyle 和 strokeStyle。
  • Web/API/Canvas_API/Tutorial/Basic_animations 可能最大的限制就是图像一旦绘制出来,它就是一直保持那样了。如果需要移动它,我们不得不对所有东西(包括之前的)进行重绘。重绘是相当费时的,而且性能很依赖于电脑的速度。
  • Web/API/Canvas_API/Tutorial/Basic_usage canvas 看起来和 img 元素很相像,唯一的不同就是它并没有 src 和 alt 属性。实际上, canvas 标签只有两个属性 —— width 和 height ...
  • Web/API/Canvas_API/Tutorial/Compositing 我们不仅可以在已有图形后面再画新图形,还可以用来遮盖指定区域,清除画布中的某些部分(清除区域不仅限于矩形,像 clearRect() 方法做的那样 )以及更多其他操作。
  • Web/API/Canvas_API/Tutorial/Compositing/Example This sample program demonstrates a number of compositing operations . The output looks like this:
  • Web/API/Canvas_API/Tutorial/Drawing_shapes 在我们开始画图之前,我们需要了解一下画布栅格(canvas grid)以 及坐标空间。上一页中的HTML模板中有个宽150px, 高150px的 ...
  • Web/API/Canvas_API/Tutorial/Transformations 在本教程的旧版本中,我们已经了解了Canvas网格和坐标空间。到目前为止,我们只是根据我们的需要使用默认的网格,改变整个画布的大小。随着变形有更强大的方法来实现起点到另一点的变换,旋转栅格甚至缩放。
  • Web/API/Canvas_API/Tutorial/Using_images canvas更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等。浏览器支持的任意格式的外部图片都可以使用,比如PNG、GIF或者JP ...
  • Web/API/ImageBitmap ImageBitmap 接口表示能够被绘制到 canvas 上的位图图像,具有低延迟的特性。运用 createImageBitmap() 工厂方法模式,它可以从多种源中生成。 ...
  • Web/Guide/Graphics 现代网站和应用需要呈现大量图片。 展示静态图片可以使用简单的HTML标签 img ,也可以采用CSS样式中的 background-image ...
  • Web/HTML/CORS_enabled_image HTML 规范中图片有一个 crossorigin 属性,结合合适的 CORS 响应头,就可以实现在画布中使用跨域 img 元素的图像。
  • Web/HTML/Element/canvas canvas元素 ...
  • Web/演示说明 Mozilla支持各种令人兴奋的开源web技术,我们鼓励大家使用它们.此页面提供了有关这些技术的一些有趣演示链接, 其中包括一些曾在Demo Studio中很流行,后来又 被弃用的 例子. ...