一：专题描述和基础使用

一：从刚开始接触web，就接触html5中的canvas，然而在工作几乎没有用到过，基本处于简单的了解，现在项目中，自己做了个上传，但是手机拍照的图片很大，需要处理，接触到canvas可以（不借助第三方插件）。所以，再次学习一下canvas，于是做个开篇总结，以后工作中慢慢补充。

文章详细参考  http://www.cnblogs.com/liugang-vip/p/5360283.html

二：canvas的主要功能

  2.1画图
  2.2处理图片（主要用处理图片的大小尺寸，实现裁剪与缩小字节）

三：基础使用

<canvas width=”1000” height=”1000” id=”myCanvas”>
       您的浏览器版本过低，不支持HTML5新增的canvas标签。
</canvas>

使用js获取该画布，并指定对象

<script>
       Var canvasID = document.getElementById(“myCanvas”);
       Var canvas = canvasID.getContext(“2d”);
</script>

  注：在设置canvas宽高时，在标签上设置比较好，单位值默认为像素！

3.1 API 

 

toDataURL()   getContext()  Restore()  save()

3.2 画线

 

3.3 画园

 

四：★ 重点熟悉下 图形处理  drawImage() 

  drawImage() 

语法一：

drawImage(img,x,y) 在画布上定位一张图片

 

//参数：img 表示引入的图片对象，x,y表示引入的坐标

//ps:img在这里表示的是图片的对象而不是图片的路径，说明不能直接来引用图片，而是需要操作DOM的方式来引用

//例如
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var oImg = document.getElementById("img"); //是图片的对象
ctx.drawImage(oImg,10,10);

 

语法二：

drawImage(img,x,y,w,h)  在画布上定位图片，并规定图片的宽高

//w,h表示规定图片的大小

语法三：

drawImage(img,sX,sY,sWidth,sHeight,x,y,width,height)  剪切画布，并在画布上定位被剪切的部分

//参数：img 表示引入的图片对象，sX,sY表示剪切的其实坐标，sWidth,sHeight表示剪切的宽度和高度，x,y表示在画布上放置图片的坐标 ，width,height表示需要使用的图片的宽高