画布是什么

子凡 问答 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. 加载中..

相关推荐

  • UV 打印机 UV printer

    UV打印机可以打印什么材料

    UV打印机可以打印的材料非常多,只要是平面产品或者是圆柱体产品都可以打印,有PVC、反光膜、油画布、地毯、皮革,还可以在T恤、移门、柜门、推拉门,玻璃、板材、各种标牌、水晶等材料都可以打印。
  • UV 打印机 UV printer

    UV打印机是什么

    UV打印机是一种高科技的免制版全彩色数码印刷机,主要特点是能打印的材料范围广泛、定位精确、可无版印刷、精度较高,UV打印机几乎适用于任何材料,因此它的适用范围也很广,在广告加工行业、纺织行业、个性化定制印刷行业等都有使用。
  • PS resolution PS 分辨率

    PS分辨率一般是多少

    PS分辨率如果图片需要打印出的话,比如一寸照片,就需要将分辨率设置为300dpi;图片不需要打印出,只需要在电脑或手机上显示的话,比如淘宝美工,将分辨率设置为72dpi;输出的大型喷画,对画质要求较高的,可以设置分辨率为150dpi。
  • grid system 格栅系统

    如何制定栅格系统

    制定栅格系统首先选择画布尺寸;确定栅格区域,将页面按照功能模块划分为全局控制区、内容区、背景区、弹层区;网格设置,现在主流网格单元的尺寸为8PX;栅格计算,常见栅格有12栅格和24栅格,栅格分的数量越多承载内容结构越复杂,展示信息更详细。
  • 二维计算机图形 2D Computer Graphics

    二维计算机图形是什么

    二维计算机图形简称为二维CG,是基于计算机的数字图像的产生—主要是从二维模型(例如二维几何模型,文本,和数字图像)产生,并且使用只适用这些模型的技术。该词也用于指代这些模型本身。采用该技术的计算机科学的分支称为二维计算机图形学。
  • ROG Flow Z13 华硕游戏平板电脑

    华硕ROG Flow Z13,为游戏玩家生活方式打造的游戏平板电脑

    华硕ROG Flow Z13 是一款非常小巧轻便的游戏平板电脑,其紧凑的外形却为桌面带来了超强的动力,令人难以置信的灵活性,与 ROG XG Mobile 生态系统兼容,Flow Z13 可以打开一角钱进入您的完整游戏设置或创意工作站的中心,发挥无限潜力。