一:专题描述和基础使用
一:从刚开始接触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表示需要使用的图片的宽高