javascript:使用canvas绘图2D图形

时间:2021-09-03 00:20:40

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指定先绘制的图形与后绘制的图形如何重叠。