本文主要是对在公司实习第一周对需要完成项目所要的一些知识点进行收集与总结，主要内容包括一些canvas的基础知识和在做项目过程中遇见的相关javascript问题的解决方案。
主要目标是通过学习深入canvas和javascript，完成一个较复杂在线web图片编辑器。
HTML5 canvas的一些基础知识
一、关于canvas元素
负责在页面中设定一个区域，通过JavaScript动态地在这个区域中绘制图形。
二、canvas元素的大小与绘图表面的大小
Canvas元素有两套尺寸，一个是元素本身大小，一个是元素绘图表面的大小。
- 通过
<canvas id=”canvas” width=”600” height=”300”></canvas>直接设置宽、高属性会同时修改元素本身和元素绘图表面的的大小。 - 通过css设定canvas元素的大小，只改变元素本身的大小，不影响绘图表面。
当canvas元素的大小不符合其绘图表面大小时，浏览器就会对绘图表面进行缩放，使其符合元素大小。
三、canvas元素的API：
只提供了两个属性：width和height
三个方法：
- getContext( ) 返回与该canvas元素相关的绘图环境对象。
- toDataURL( ) 返回一个数据地址，可设定为img元素的src属性值。
- toBlob( ) 创建表示此canvas元素图像文件的Blob。
四、canvas的绘图环境：
有2d绘图环境、3d绘图环境WebGL以及其他canvas规范在着手准备的绘图环境。
Canvas元素仅仅是为了充当绘图环境对象的容器而存在的，该环境对象提供了全部的绘制功能。
JavaScript中preventDefault方法
preventDefault:取消事件的默认事件。比如在页面上拖动图片时，会使图片虚化并在其上浮现一个禁止标志。此时调用该方法会取消该默认行为。
JavaScript中的style、currentStyle、getComputedStyle区别
- style：
在JavaScript中，通过document.getElementById(id).style.XXX可以获取到和设置XXX的值，但是，这样只能获取DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就得不到我们想要的信息。 - currentStyle：
currentStyle可以获取到通过内联或外部引用的css样式的值，如document.getElementById(“test”).currentStyle.top。（但仅限于IE） - getComputedStyle：
对于FF、opera、safari、chrome，可以通过getComputedStyle获取到通过内联或外部引用的CSS样式的值，如
dodocument.defaultView.getComputedStyle(mydiv,null).width; - Ps：currentStyle和getComputedStyle只能用于获取页面元素的样式，不能用来设置相关值。