JavaScript高级程序设计---学习笔记(五)

1、2D上下文

1)填充与描边

填充和描边的两个操作取决于两个属性:fillStyle和strokeStyle。两个属性的值可以是字符串、渐变对象或模式对象,默认值都是#000000

例:

html:

<canvas id="drawing" width="200" height="200"></canvas>

js:

  var drawing = document.getElementById("drawing");

    if(drawing.getContext){//确定浏览器支持canvas元素
        var context = drawing.getContext("2d");
        context.strokeStyle = "red";
        context.fillStyle = "#0000ff";
    }

2)绘制矩形

与矩形有关的方法包括fillRect()、strokeRect()、clearRect()。这三个方法都接收4个参数:矩形的x坐标、矩形的y坐标、矩形的宽度和矩形的高度。单位都是像素。

首先,fillReat()方法在画布上绘制的矩形会填充指定的颜色,填充的颜色通过fillStyle属性指定,例:

var drawing = document.getElementById("drawing");

    if(drawing.getContext){
    var context = drawing.getContext("2d");
    //绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);
    //绘制半透明的蓝色矩形
    context.fillStyle = "rgba(0,0,255,0.5)";
    context.fillRect(30,30,50,50);

strokeRect()方法在画布上绘制的矩形会使用指定的颜色描边。描边的颜色通过strokeStyle属性指定。

clearRect()方法用于清除画布上的矩形区域。

3)绘制路径

要绘制路径,首先必须调用beginPath()方法,表示要开始绘制新路径。然后,再通过调用下列方法来实际地绘制路径。

1.arc(x,y,radius,startAngle,endAngle,counterclockwise):以(x,y)为圆心绘制一条弧线,弧线半径为radius,起始和结束(用弧度表示)分别为startAngle和endAngle。最后一个参数表示startAngle和endAngle是否按逆时针方向计算,值为false表示按顺时针方向计算。

2.arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线,到(x2,y2)为止,并且以给定的radius穿过(x1,y1)。

3.bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线,到(x,y)为止,并且以(c1x,c1y)和(c2x,c2y)为控制点。

4.lineTo(x,y):从上一点开始绘制一条直线,到(x,y)为止。

5.moveTo(x,y):将绘图游标移动到(x,y),不画线。

6.quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线,到(x,y)为止,并且以(cx,cy)为控制点。

7.rect(x,y,width,height):从点(x,y)开始绘制一个矩形,分别指定宽和高,这个方法绘制的是矩形路径,而不是strokeRect()和fillRect()所绘制的独立的形状。

创建完路径后,接下来有几种可能的选择:

如果想绘制一条连接到路径起点的线条,可以调用closePath()。如果路径已经完成,想用fillStyle填充它,可以调用fill()方法,还可以调用stroke()方法对路径描边,描边使用的是strokeStyle。最后还可以调用clip(),这个方法可以在路径上创建一个剪切区域。

例:绘制一个不带数字的始终表盘。

var drawing = document.getElementById("drawing");
    if(drawing.getContext){
    var context = drawing.getContext("2d");

        //开始路径
        context.beginPath();
        //绘制外圆
        context.arc(100,100,99,0,2 * Math.PI,false);
        //绘制内圆
        context.moveTo(194,100);
        context.arc(100,100,94,0,2 * Math.PI,false);
        //绘制分针
        context.moveTo(100,100);
        context.lineTo(100,15);
        //绘制时针
        context.moveTo(100,100);
        context.lineTo(35,100);
        //描边路径
        context.stroke();

还有一个isPointInPath()的方法。这个方法接收x和y坐标作为参数,用于在路径被关闭之前确定画布上的某一点是否位于路径上。例如:

if(context.isPointInPath(100,100)){
            alert("Point(100,100) is in the path");
        }

4)绘制文本

 绘制文本有两个方法:fillText()和strokeText()。都接收4个参数:要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。而且都以下列3个属性为基础:

1.font:表示文本样式、大小及字体

2.textAlign:表示文本对齐方式

3.textBaseline:表示文本的基线

例:在上面创建的表盘上绘制数字12

context.font = "bold 14px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillText("12",100,20);

 5)变换

1.rotate(angle)

2.scale(scalex,scaley)

3.translate(x,y)

4.transform(m1_1,m1_2,m2_1,m2_2,dx,dy)

5.setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy)

6)绘制图像

drawImage()

7)阴影

1.shadowColor

2.shadowOffsetX

3.shadowOffsetY

4.shadowBlur

8)渐变

createLinearGradient()

9)模式

createPattern()

10)使用图像数据

getImageDate()

11)合成

globalAlpha和globalCompositionOperation

posted @ 2017-04-21 11:35  Lovebugs.cn  阅读(282)  评论(0编辑  收藏  举报