《HTML5 canvas开发详解(第2版)》——1.9 HTML5 Canvas对象

简介:

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

1.9 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()方法,把画布中的图像导出到另一个浏览器窗口。

提示
第三个公共的方法——toBlob(),已经被定义,并且正在不同的浏览器上实现该方法。toBlob([callback])将返回一个引用图像的文件,而不是一个base64编码的字符串。目前,尚未有任何浏览器实现该方法。

相关文章
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
900 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
810 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
281 29
|
移动开发 前端开发 HTML5
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
259 1
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
302 5
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
208 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸,十秒数字倒计时,全屏倒计时动画效果,给人一种非常大气的视觉感
251 0
HTML5 Canvas制作的粒子十秒倒计时源码
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
245 5
|
移动开发 前端开发 API
《HTML5 Canvas游戏开发实战》——3.4 小结
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.4节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1169 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.3 自定义画板
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.3节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1639 0