HTML5最少欢迎的一个新功能就是canvas元素,这个元素负责在页面中设定一个区域,然后就可以使用javascript进行动态的绘图。
- 基本用法
<canvas id="drawing" widht="200" height="300"> a drawing of somethind </canvas>
设定了画布后,要去的绘图上下文,通过get.Context("2d")方法
var drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");
}
使用toDataURL(),参数为图像的MIME类型格式,如toDataURL("image/png")
var drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");
var imgURI = context.toDataURL("image/png");
var image = document.createElement("img");
image.src = img;
documemt.body.appendChild(image);
}
- 2D上下文
2D上下文的坐标开始与canvas元素的左上角。使用2D上下文可以绘制矩形、弧形和路径。2D上下文两个基本操作就是填充和描边,属性fillStyle()实现填充效果,属性strokeStyle()实现描边效果,这两个方法的参数为表示颜色的字符串、渐变对象、模式对象。
1)绘制矩形
对于绘制矩形有三种方法:fillRect() , strokeRect() , clearRect()。这三个方法都接受四个参数,x坐标,y坐标,width,height。
fillRect()的填充颜色由filleStyle()方法指定,同理stokeRect()由strokeStyle()指定。
描边线条的宽度有lineWidth()指定,lineCap指定线条末端是平头(butt)、圆头(round)还是方头(square),lineJoin()控制线条相交的方式(圆交round,斜交bevel,斜接miter)
clearRect()用于清理画布上得指定区域。
context.fillRect(10,10,50,50);
context.fillStyle("red");
context.stokeRect(20,20,50,50);
context.strokeStyle("green");
context.lineWidth(5);
context.lineCap('round');
context.lineJoin("round");
2) 绘制路径
绘制路径首先调用beginPath(),表示要绘制新的路径。然后调用下面的方法绘制实际的路径。
1)绘制弧线 arc(x,y,radius,staryAngle,endAngle,counterClockWise) --- 以(x,y)为圆心,半径为radius,开始角度为startangle,结束角度为endangle,counterClockWise值为false表示按顺时针计算。
2)从上一点开始绘制弧线 arcTo(x1,y1,x2,y2,radius),以x2,y2为终点,通过x1,y1
3) 从上一个点绘制曲线 bezierCurveTo(c1x,c1y,c2x,c2y,x,y) ,从上一点开始绘制曲线,终点为x,y,以(c1x,c1y)( c2x,c2y)为控制点
4)从上一点开始绘制一条直线 lineTo(x,y)
5) moveTo(x,y) 绘制图表移动到x,y点
6) quadraticCurveTo(cx,cy,x,y) 绘制二次曲线,终点为x,y,cx,cy为控制点
7)rect(x,y,widht,height) 绘制矩形路径
创建路径后,调用closePath()绘制连接到起点的路径,调用fill()填充路径,调用stroke()创建描边路径。
以下代码绘制了时钟:
//外圆
context.arc(100,100,99,0,2*Math.PI,false);
//内圆
context.arc(100,100,94,0,2*Math.PI,false);
context.moveTo(100,100);
context.lineTo(100,15);
context.moveTo(100,100);
context.lineTo(100,30);
//描边路径
context.storke();
3)绘制文本
绘制文本主要由两个方法:fillText(),stokeText(),接收四个参数:文本字符串,x坐标,y坐标,可选的最大宽度。
这两个方法以下面的属性为基础:font, textAlign , textBaseline
textAlign的值有start end center,控制水平对齐方式 , textBaseline的值有middle,top,bottom,控制垂直对齐方式。
辅助测量文本所占的宽度方法meatureText(文本字符串),返回的对象只有一个width属性,这个方法是以设置的font,textAlign,textBaseline属性来测量文本可宽度。
var fontsize = 140px;
context.font = fontsize + " italic Arial";
context.textAlig = center;
context.textBaseline = "top";
while(context.meatureText("hello").width > 140){
fontsize -- ;
context.font = fontsize + " italic Arial";
}
context.fillStyle("red");
context.fillText("hello",10,10);
4)变换
修改变化矩阵的方法:
rotate(angle):围绕原点旋转angle角
scale(scaleX,scaleY) : 缩放图像,在x方向乘以scaleX,在y方向乘以scaleY
translate(x,y) : 将坐标原点移动到(x,y)点
transform(m1_1,m2_1,m2_1,m2_2,dx,dy) : 直接修改变换矩阵
setTransforn(m1_1,m2_1,m2_1,m2_2,dx,dy) : 将变换矩阵重置为默认状态,在调用transform方法
通过context.save()可以将设置保存下来,再通过context.restore(),从当前设置一级一级向上得到之前的设置
5)绘制图像
通过方法drawImage()绘制图像,不同的实现效果这个方法需要传入的参数不同。
最简单的参数是,html的image元素,绘制区域起点x坐标,y坐标
var img = document.images[0];
context.drawImage(img,10,10);
绘制图像的一部分到画布中:
参数为:image元素,源图像的坐标起点x值,y值,width,height,目标图像的x值,y值,width,height.
将一个canvas元素绘制到另一个画布中
6)阴影
shadowColor = 颜色值
shadowOffsetX = X方向的偏移量
shadowOffsetY = Y方向的偏移量
shadowBlur = 模糊值
7)渐变
- 线性渐变
调用createLinearGradient(起点x坐标,起点y坐标,终点的x坐标,终点的y坐标),返回canvasGradient渐变对象。创建渐变对象后调用addColorStop(色标的位置,css颜色值),色标的位置从0到1,0代表开始的颜色,1代表结束的颜色,把这个方法返回的渐变对象赋给fillStyle或者storkeStyle(),就可以使用渐变来绘制形状或者描边。
var gradient = context.createLinearGradient(30,30,70,70);
gradient.addColorStop(0,''white");
gradient.addColorStop(1,"blue")
context.fillStyle = gradient;
context.fillRect(30,30,40,40);
- 径向渐变
方法类似线性渐变,context.createRadialGradient(起点圆的x坐标,y左边,半径,终点圆的x坐标,y坐标,半径)
8)使用模式
模式其实是重复的图像,调用方法createPattern(image元素,css的background-repeat值),将返回对象赋给fillstyle()
var img = document.images[0];
var pattern = context.createPattern(img,"repeat");
context.fillStyle = pattern;
context.fillRect(30,30,100,100);
createPattern的第一个参数也可以是video对象或者canvas对象
9)获得图像数据
调用方法getImageData(获得的图像区域的x坐标,y坐标,width,height) , 返回imageData对象,这个对象有三个属性:width,height,data . 其中data属性存储这图像中每一个像素的值,每个像素又保存着rgba四个元素值。
var data = context.getImageData(0,0,image.width,image.height);
red = data[0]
gree = data[1]
blue = data[2]
alpha = data[3]
10) 合成
两个属性:globalAlpha = 0到1之间的值 , globalCompositionOperation = 指定的字符串值。
globalAlpha设置所有绘制区域的透明度
globalCompositionOperation指定先绘制的图形与后绘制的图形如何重叠。