Canvas是什么

子凡问答2020-08-12 12:17:28阅读(...)

画布(Canvas)元素是 HTML5 的一部分,允许脚本语言(scripting languages)动态渲染位图像。

Canvas API(画布)是在 HTML5 中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用 JavaScript 操作的位图(bitmap)。

画布 Canvas

画布(Canvas)元素是 HTML5 的一部分,允许脚本语言(scripting languages)动态渲染位图像。

它最初由苹果内部使用自己 Mac OS X WebKit 推出,供仪表盘的构件和 Safari 浏览器等应用程序使用。后来,它被 Gecko 内核的浏览器(尤其是 Mozilla Firefox),Opera 和 Chrome 实现,并被网页超文本应用技术工作小组提议为下一代的网络技术的标准元素。在介绍 Canvas 给不同的 Web 标准社区时,他们有不同的反应。有些人抱怨苹果公司建设了一个新的专有标准而不是支持未被网络开发商广泛接受的 SVG 标准。

Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域,类似于其他通用的二维 API,通過一套完整的绘图函数来动态生成图形。一些可能的用途,包括使用 Canvas 构造图形,动画,游戏和图片。如果您要在 HTML 中加入 canvas 元素,请将以下代码加入到部分中。

大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上,而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。

Canvas API 也使用了路径的表示法。但是,路径由一系列的方法调用来定义,而不是描述为字母和数字的字符串,比如调用 beginPath() 和 arc() 方法。

一旦定义了路径,其他的方法,如 fill(),都是对此路径操作。绘图环境的各种属性,比如 fillStyle,说明了这些操作如何使用。

注释:Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 <canvas> 图形,必须要么自己绘制它再用位图图像合并它,或者在 <canvas> 上方使用 CSS 定位来覆盖 HTML 文本。

Canvas 对象的属性

height 属性

画布的高度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 150。

width 属性

画布的宽度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

收藏0个人收藏
走进科技生活方式

评论交流

泪雪默认头像请「登录」后参与评论
  1. 加载中..