我在很多企业的招聘需求中看到了canvas这个东西,所以参考《javascript高级程序设计》来学习一下。
什么是Canvas?
canvas元素是html5新增的一个元素,它负责在页面中设定过一个区域,然后在这个区域中,使用javascript动态的绘制图形。Canvas最早由苹果公司推出,自html5加入这个元素,大部分主流浏览器都开始支持它。
Canvas的组成部分
canvas由几组api构成,但并非所有浏览器都支持所有的api,这里主要学习具备基本绘图能力的2D上下文,接下来开始学习。
#Canvas的基本用法
Canvas的基本使用
下面一步一步来进行学习
获取2D上下文对象以及getContext()方法
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
</head>
<body>
<!-- Canvas需要width和height属性确定绘图区域的大小,如果浏览器不支持Canvas属性,则会显示标签中的内容,
这里发现如果在外部样式设置宽高,绘图时宽高会有异常,所以使用内部样式 -->
<canvas id="drawing" width="200" htight="200">Canvas绘制</canvas>
<script type="text/javascript">
// 获取canvas
var drawing = document.getElementById('drawing');
// 判断浏览器是否支持canvas元素
if(drawing.getContext){
// 获取2d上下文对象
console.log(drawing.getContext('2d'))
}
</script>
</body>
</html>
这里使用console.log()在浏览器看一下2d上下文对象
这里解释一下问什么要检测getContext()方法是否存在,在《javascript高级程序设计》中描述:有些浏览器会为HTML规范外的元素创建默认的HTML元素对象。这种情况下,即使元素变量中保存着一个有效的元素引用,也不能检测到getContext()方法,如FireFox3。
toDataURL()
toDataURL()方法可以导出在canvas元素中绘制的图像,这个方法接收一个参数,指定图像的MIME格式,并且适用于建立图像的任何上下文。
if(drawing.getContext){
// 获取图像数据URI
var imgURI = drawing.toDataURL("img/png");
// 显示图像
var image = document.createElement('img');
image.src = imgURI;
document.body.appendChild(image);
}
这里的img标签是动态添加的,src属性是toDataURL()方法获取到的数据,默认情况下,浏览器会将图片编码为PNG格式。
才看到书中的一段编者注:toDataURL()这个方法属于是canvas对象的方法,不是2d上下文的方法,这里需要注意记住。