一、canvas简介
1、canvas元素是html5的新增元素
2、canvas元素本身没有绘图能力，需要通过javascript和canvas元素标签来绘制图形
3、可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面
4、Canvas API主要聚焦于2D图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的2D和3D图形
二、canvas元素知识
<canvas id="myCanvas" width="150" height="150">当前浏 览器暂不支持canvas， 请更换浏览器后再试</canvas>
1、canvas会初始化宽度为300px和高度为150px。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。(注意: 如果你绘制出来的图像是扭曲的, 尝试用width和height属性为canvas明确规定宽高，而不是使用CSS)
2、某些较老的浏览器（尤其是IE9之前的IE浏览器）或者文本浏览器不支持canvas，在这些浏览器会忽略容器并展示替代内容
3、canvas元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能,通过getContext()可以检查浏览器是否支持canvas
var canvas = document.getElementById('myCanvas'); if (canvas.getContext){ //支持canvas } else { // 不支持canvas }
三、绘制
1、绘制形状
1.1移动笔触
moveTo()：从一个点到另一个点的移动过程，我们通常会使用moveTo()函数设置起点，也能够用来绘制一些不连续的路径
1.2绘制直线
lineTo(x, y)：绘制一条从当前位置到指定x以及y位置的直线
1.3绘制矩形
canvas提供了三种方法绘制矩形：
fillRect(x, y, width, height)：绘制一个填充的矩形；
strokeRect(x, y, width, height)：绘制一个矩形的边框；
clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明
function draw() { var canvas = document.getElementById('myCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(25, 25, 100, 100); ctx.clearRect(45, 45, 60, 60); ctx.strokeRect(50, 50, 50, 50); } }
1.4绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。以下是绘制路径所要用到的函数：
beginPath()新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径；closePath()闭合路径之后图形绘制命令又重新指向到上下文中；
stroke()通过线条来绘制图形轮廓；
fill()通过填充路径的内容区域生成实心的图形
function draw() { var canvas = document.getElementById('myCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75, 50); ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.fill(); } }
1.5绘制曲线
arc(x, y, radius, startAngle, endAngle, anticlockwise)：画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成；
arcTo(x1, y1, x2, y2, radius)根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点；
quadraticCurveTo(cp1x, cp1y, x, y)绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点；
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
2、绘制文本
2.1、渲染文本
canvas 提供了两种方法来渲染文本:
fillText(text, x, y [, maxWidth])：在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的
strokeText(text, x, y [, maxWidth])：在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的
2.2、文本样式
font = value：当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
textAlign = value：文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
textBaseline = value：基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
direction = value：文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
2.3、阴影效果
shadowColor：任何CSS中的颜色值，可以使用透明度
ShadowOffsetX：像素值，值为正数，向右移动阴影；值为负数，向左移动阴影
shadowOffsetY：像素值，值为正数，向下移动阴影；值为负数，向上移动阴影
shadowBlur：模糊值，值越大，阴影边缘越模糊
3、绘制图片
canvas有一项特性是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。
引入图像到canvas里需要以下两步基本操作：
- 获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片
- 使用drawImage()函数将图片绘制到画布上
function draw() { var ctx = document.getElementById('myCanvas').getContext('2d'); var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0); } img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; }
其中drawImage 方法有三种形态:
drawImage(img,x,y)：img 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标
drawImage(img,x,y,width,height)：这个方法多了2个参数，用来规定图像的宽度和高度
drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：这种有8个新参数，用于控制做切片显示的；前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小
四、利用canvas下载图片
实现原理是使用drawImage()方法将图片画在画布上，然后调用toDataURL()方法，该方法返回一个包含图片展示的数据URL。具体实现如下：
function downloadFn(url){ var Img = new Image(); //创建img实例 Img.setAttribute('crossOrigin', 'anonymous'); //解决跨域Canvas污染问题 Img.src=url; Img.onload=function(){ //图片加载是异步的，需要确保图片能够完整获取到 var canvas = document.createElement('canvas'); //创建canvas元素 canvas.width=Img.width, //设置canvas的宽高和图片一致 canvas.height=Img.height; var context = canvas.getContext('2d'); context.drawImage(Img,0,0,Img.width,Img.height); //绘制图片 var dataURL=canvas.toDataURL('image/png'); //转换图片为dataURL var a = document.createElement('a'); //创建a标签，用于下载图片 a.download = '图片'; a.href = dataURL; a.click(); //触发点击下载 }; }
