版权声明:(๑╹◡╹)ノ""" https://blog.csdn.net/qq_41218152/article/details/82656381
Canvas绘图——基本用法
一 、相关补充
- HTML5添加的
<canvas>
元素负责在页面中设定一个区域,然后可以通过JavaScript动态地在这个区域中绘制图形 <canvas>
最早由苹果公司推出的,当时主要用在其Dashboard微件中。很快,HTML5加入了这个元素,主要浏览器也迅速开始支持它。IE 9+、Firefox 1.5+、Safari 2+、Opera 9+、Chrome、IOS版Safari以及Android版WenKit都早某种程度上支持<canvas>
- 与浏览器环境中的其他组件类似,
<canvas>
由几组API构成,但并非所有浏览器都支持所有这些API - 除了具备基本绘图能力的2D上下文,
<canvas>
还建议了一个名为WebGL的3D上下文 - 目前,支持
<canvas>
的浏览器支持2D上下文及文本API,但对WebGl的支持还不够好 - Firefox 4+和Chrome支持WebGL规范的早期版本,但一些老版本大操作系统,比如吧Windows XP,由于缺少必要的绘图程序,即便安装了这两款浏览器也没用
二、基本用法
(一).相关概念
- 要使用
<canvas>
元素,必须先设置其width
和height
属性,指定可以绘图的区域大小 - 出现在开始和结束标签中的内容是后备信息,如果浏览器不支持
<canvas>
元素,就会显示这些信息 - 与其他元素一样,
<canvas>
元素对应的DOM元素对象也有width和height属性,可以随意修改 - 而且也能通过CSS为该元素添加样式,如果不添加任何样式或者不绘制任何图形,在页面中是看不到该元素的
- 要在画布上绘图,需要取得绘图上下文。而取得绘图上下文对象的引用,需要调用
getContext()
方法并传入上下文的名字。传入"2d"
,就可以取得2D上下文对象
var drawing=document.getElementById("drawing");
//确定浏览器支持 <canvas> 元素
if(drawing.getContext){
var context=drawing.getContext("2d");
//更多代码
}
/*在使用<canvas>元素之前,首先要检测getContext()方法是否存在,这一步非常重要。有些浏览器会为HTML规范之外的元素创建默认的HTML元素对象。在这种情况下,即使drawing变量中保存着一个有效的元素引用,也检测不到getContext()方法*/
(二).toDataURL()
- 使用
toDataURL()
方法,可以导出<canvas>
元素上绘制的图像 - 这个方法接收一个参数,即图像的MIME类型格式,而且适用于创建图像的任何上下文
- 如果绘制到画布上的图像源自不同的域,
toDataURL()
方法会抛出错误
var drawing=document.getElementById("drawing");
//确定浏览器支持 <canvas> 元素
if(drawing.getContext){
//取得图像的数据URL
var imgURL=drawing.toDataURL("image/png");
//显示图像
var image=document.createElement("img");
img.src=imgURL;
document.body.appendChild(image);
}
/*默认情况下,浏览器会将图像编码为PNG格式(除非另行指定)。Firefox和OPera也支持机遇和"image/jpeg"参数的JPEG编码格式。由于这个方法是后来才追加的,所以支持<canvas>的浏览器也是在较新的版本中才加入了对它的支持*/
源于《JavaScript高级程序设计》