HTML5 canvas

canvas

canvas：新标签，实现绘图
getContext()：获得canvas的画板，所有绘图操作通过画板，可以在括号中加两个值，2d或3d

绘制矩形方法（生成基础形状方法）：

fill(x,y,eidth,height);   填充矩形strokeRect(x,y,eidth,height);    非填充矩形clearRect(x,y,width,height);    透明颜色矩形

（1）获取绘图上下文

var ctx=canvas.getContext("2d/3d");

（2）有关配置的方法

• ctx.scale(xScale,yScale);
  (xScale：<1：缩小，0.8：缩放到80%，=1：原始大小，>1：放大几倍)
• save()：保存当前画布状态
• restore()：获取上一个保存画布的状态
• translate(x,y)：变换画布原点，默认原点：(0,0)

（3）颜色

• strokeStyle：声明形状线条的颜色
• fillStyle：形状内部区域的颜色
• globalAlpha：透明度属性

（4）渐变

• createLinearGradient(x1,y1,x2,y2)：在画布上创建一个线性渐变
• createRadialGradient(x1,y1,x2,y2,r2)：使用两个圆形在画布上创建一个渐变对象
• addColorStop(position,color)：指定渐变颜色值
  如：addColorStop(0.5,”blur”)

（5）创建路径

• beginPath()：开始一个新的形状描述
• closePath()：关闭路径，用执行将最后一个点与原点相连，如果想保留开放路径，则不需要调用这个方法。
• stroke()：将路径绘制为轮廓形状
• fill()：将路径绘制为实心形状
• clip()：在上下文中设置裁剪区域
• moveTo(x,y)：将笔触移到指定的位置
• lineTo(x,y)：从当前到(x,y)绘直线
• rect(x,y,width,height)：生成一个矩形路径
• arc(x,y,radius,starAngle,endAngle,direction)：这个方法可以在位置(x,y)上生成弧线或圆形，半径和弧度分别由属性指定，direction是布尔类型，表示顺时针或者逆时针方向。

（6）线性

• lineWidth：粗细
• lineCap：端点形状，值有三个
  （butt：默认，平直；round：圆形线帽；square：正方形线帽，round和square使线条变微长）
• lineJoin：连接点形状，round：圆角，bevel：斜角，miter：尖角
• miterLimit：与lineJoin一起使用，当lineJoin设置为miter时，可用于确定线条交接点的延伸范围

（7）文字

• font：与css的font类似
• textAlign：水平对齐，值：start，end，left，right，center
• textBaseLine：垂直对齐，值：top，hanging，middle，alphabetic，ideographic和bottom
• strokeText(text,x,y)：在位置(x,y)处绘制指定文字的轮廓
• fillText(text,x,y)：与上一个方法相似，实心文字
• measureText()：文字大小信息

（8）阴影

• shadowColor：颜色
• shadowOffsetX：接受一个数组，确定水平投射距离
• shadowOffsetY：接受一个数组，确定垂直投射距离
• shadowBlur：模糊效果

（9）绘制图像

• drawImage(image,x,y,w,h)
• 平铺图像：canvas.createPattern(image,type)
  type:平铺方式（no-repeat：不平铺；repeat-x：水平方向平铺；repeat-y：垂直方向平铺；repeat：全方向）
• 切割元素：canvas.clip();

（10）拖放
源元素事件：（拖放的元素）：

• dragstart：当拖到操作开始，触发
• drag：与mousemove事件相似，发生拖动时触发
• dragend：结束时触发

目标元素事件：

• dragenter：拖动过程中，当鼠标指针第一次进入目标元素区域
• dragover：当对象拖动到目标对象触发
• drop：在目标元素内投放时，触发
• dragleave：拖动过程中，当被拖动对象离开目标对象时触发
  注：执行以上方法前，需要通过e.preventDefault()阻止默认行为
• dataTransfer对象：保存拖放过程中个组件所设计到的数据通过event对象获取

方法：

• setData(type,data)：声明发生的数据与类型
• getData(type)：返回指定type的数据
• clearData(type)：删除指定类型的数据
  type：取值， text：保存普通文本
• setDragImage()：拖动过程中，修改鼠标指针所指向的图像。