canvas总结

什么是canvas

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

创建一个canvas

一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.
注意: 默认情况下 <canvas> 元素没有边框和内容。你也可以添加。

使用如下代码，你就在页面中创建出来一个宽200px、高100px的canvas，如果没有指定宽高，canvas的默认宽高为300px * 150px,通常我们需要给canvas一个id以便在脚本中引用。

<canvas id="myCanvas" width="200" height="100"></canvas>

我们也可以动态创建canvas，使用一下代码，我们在页面中创建出了一个id为layer的canvas，指定了其宽高。

var canvas = document.createElement('canvas');
canvas.id = "layer";
canvas.width = 200;
canvas.height = 100;
document.body.appendChild(canvas);

canvas操作

我们可以使用canvas绘制线条、矩形、圆形、文本、图像，可以对图形、文本进行颜色填充以及渐变填充。详细内容可查看基础教程，其中我们用到的比较多的应该是绘制图像，绘制图像会在下面专门讲解。

canvas属性中的宽高和css中宽高的区别

我们先看一个例子
我们使用属性中的宽高创建一个canvas，其宽高为300px，我们在其中画一条线，从（0，0）点到（300，300）点。我们可以看出该图显示正常不会被拉伸。

<canvas id="layer" width="300" height="300">浏览器不支持Canvas,请升级或改用其它浏览器！</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("layer"),
    ctx = canvas.getContext('2d');
    ctx.moveTo(0,0);
    ctx.lineTo(300,300);
    ctx.stroke();
</script>

属性宽高

接着我们给canvas设置一下style中宽高

 #layer {
       width: 150px;
       height: 300px;
}

效果如下，使用style时图像会被拉伸（变形）

设置style

这是什么原因？？？我们需要搞清楚两个概念：
1.画布的宽和高（ps新建画布的宽和高）；
2.画布所在画板的宽和高（例如ps打开后的窗口）；

默认的画板、画布的宽和高是属性中设置的宽高（例子中即为300*300）。但在画布上设置style属性的话，相当于把画板的宽和高改变了，而画布的宽和高还是默认值，所以 画布会出现拉伸的情况，此例中设置的画板的宽150和高300，相当于将画布的宽度缩小一倍，所以实际上画出来的是黑色的那条。 直接设置宽和高相当于是同时修改了画板和画布的宽和高（两者一致），所以在画布上画的图形不会出现拉伸（如红色那条线）。

image.png

canvas绘制图像

绘制图像主要使用的是drawImage方法
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
语法：
1.在画布上定义图像：
context.drawImage(img,x,y);
2.在画布上定位图像，并规定图像的宽度和高度：
context.drawImage(img,x,y,width,height);
3.剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数值：

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像)

以上基础内容查看w3c教程

绘制图像中的填坑

1.绘制图像时，canvas中没有图像

var drawimg = document.getElementById("drawimg");
var image=document.getElementById("image");
var context = drawimg.getContext("2d");
context.drawImage(image,10,10); 

原因是图片是异步加载，在之前的代码中，执行js代码的时候图片有可能还没有加载成功，就调用了drawImage()方法，所以图片就无法显示。所以在使用drawImage（）方法时，务必保证所绘图像已经加载好了。通常我们会将其放在图片加载onload回调函数中确保这一点。

image.onload=function(){
   context.drawImage(devBgImg,imgX,imgY,imgWidth,imgHeight);
};

//例子
var img = new Image();
img.src ='devmonitor/res/main.jpg'; 
img.onload=function(){
ctx.drawImage(img,0,0,img.width,img.height,imgX,imgY,
      canvas.width*imgScale,canvas.height*imgScale);
};

---

canvas像素操作

语法
context.getImageData(x,y,width,height);

参数	描述
x	开始复制的左上角位置的 x 坐标。
y	开始复制的左上角位置的 y 坐标。
width	将要复制的矩形区域的宽度
height	将要复制的矩形区域的高度

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：

width
无符号长整型（unsigned long），使用像素描述 ImageData 的实际宽度。
height
无符号长整型（unsigned long），使用像素描述 ImageData 的实际高度。
data
Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间（包括255）。

imageData.data;
一维数组，存储了从canvas中获取的每个像素的RGBA值。该数组为每个像素点保存了四个值——红、绿、蓝和alpha透明度。
imageData.data并不是一个真正的数组，而是一个类数组的对象-------Uint8ClampedArray，data是个一维数组！data的元素始终依次是red,green,blue,alpha,red,green,blue。。。一直重复到最后一个。所以，data的length始终是像素个数*4.而在循环data的时候，也是以4为步长。

imageData.data图示

综合例子我们可以对canvas中像素进行操作

翻转颜色

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// 反转颜色(步长为4)
for (var i=0;i<imgData.data.length;i+=4)
  {
  imgData.data[i]=255-imgData.data[i];
  imgData.data[i+1]=255-imgData.data[i+1];
  imgData.data[i+2]=255-imgData.data[i+2];
  imgData.data[i+3]=255;
  }
ctx.putImageData(imgData,0,0);

灰度处理

例子中仅仅是用红绿和蓝的平均值。你也可以用加权平均，例如x = 0.299r + 0.587g + 0.114b这个公式。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// 反转颜色(步长为4)
for (var i=0;i<imgData.data.length;i+=4)
  {
      var avg = (data[i] + data[i +1] + data[i +2]) / 3;
      data[i]     = avg; // red
      data[i + 1] = avg; // green
      data[i + 2] = avg; // blue
  }
ctx.putImageData(imgData,0,0);

颜色选择器：

//创建image对象
var img = new Image();
img.src = 'haorooms.jpg';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//img加载完成后画到canvas上
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
};
//获取颜色RGBA值的函数
function pick(event) {
  //layerX和layerY属性表示Canvas内部坐标系中的坐标
  var x = event.layerX;
  var y = event.layerY;
  var pixel = ctx.getImageData(x, y, 1, 1);
  var data = pixel.data;
  console.log(data);
  //获取到RGBA值的字符串
  var rgba = 'rgba(' + data[0] + ',' + data[1] +
             ',' + data[2] + ',' + (data[3] / 255) + ')';
  //自定义操作例如将字符串显示在某dom上或者return返回值等
  //
}
//为canvas绑定mousemove事件
canvas.addEventListener('mousemove', pick);

这篇文章中有对像素操作的多个应用介绍

canvas和图片相互转换

//此处image应确保加载完成
function convertImageToCanvas(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    return canvas;
}

// Converts canvas to an image
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

---

更新中.......