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():拖动过程中,修改鼠标指针所指向的图像。