《HTML5 Canvas开发详解》——1.8 HTML5 Canvas对象

本节书摘来自异步社区《HTML5 Canvas开发详解》一书中的第1章,第1.8节,作者: 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.8 HTML5 Canvas对象

Canvas对象是通过在HTML页面的< body > 部分中放置< canvas > 标签创建的,也可以通过以下代码创建画布实例。

var theCanvas = document.createElement("canvas");

Canvas对象有两个相关的属性和方法可以通过JavaScript访问:width和height。这些属性显示当前HTML页面创建的画布的宽度和高度。这里需要强调的是,这两个属性并不是只读的。例如,可以通过代码对它们进行更新,从而影响HTML页面上的对象。这意味着什么?这意味着可以在HTML页面上动态地调整画布尺寸而无须重新加载。

提示:
也可以使用CSS样式来改变画布的缩放比例。与调整大小不同,缩放提取当前画布位图区域,然后重新取样以适应CCS样式中设定的宽度和高度的值。例如,将画布缩放到400×400区域,可以使用以下CSS样式。

style="width: 400px; height:400px"

第3章有一个使用变换矩阵缩放Canvas的示例。
Canvas对象还有两个公共方法。第一个是getContext(),本章前面就使用过。本书将继续使用这个方法获得Canvas 2D上下文对象的引用,这样才能在画布上进行绘图。第二个方法是toDataURL(),这个方法返回的数据是代表当前Canvas对象产生位图的字符串。它就像是屏幕的一个快照。通过提供一个不同的MIME类型作为参数,可以返回不同的数据格式。基本的格式是image/png,但是也可以获取image/jpeg和其他格式。下一个应用程序将会使用toDataURL()方法 ,把画布中的图像导出到另一个浏览器窗口。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值