版权声明：(๑╹◡╹)ﾉ""" 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高级程序设计》
