文章标签：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中很流行,后来又被弃用的例子. ...