canvas使用2

文字对齐方式 :

  • 水平对齐
    ?
    1
    2
    3
    4
    //是用 textAlign 属性设置水平对齐方式（默认坐标点）
    ctx.textAlign = "start";
    ctx.font = "30px Arial";
    ctx.fillText("Hello World",100,50);

    //水平的三个坐标点分别为 start(a),left(a); center(b) ;end(c),right(c).

  • 垂直对齐:
    ?
    1
    2
    3
    4
    //是用 textBaseline 属性设置垂直对齐方式（默认坐标点）
    ctx.textBaseline = "bottom";
    ctx.font = "30px Arial";
    ctx.fillText("Hello World",100,50);

     

    //垂直的三个坐标点分别为 bottom(a),alphabetic(b);middle(c) ;top(d),hanging(d), //a 与 b 的差距等于canvas 最上边与浏览器最上边的差距。

图片操作:

  • 通过 <img>标签//此方法要插入图片
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    //先在 html 中加入标签<img>插入图片
    <img id="face" src="face.jpg" alt="The Face" width="240" height="240" /></br> //注意 img 最
    后完整”/”，否则可能显示不出来。
    *****************************************************************
    <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    //在 canvas 中获取<img>标签id
    var img = document.getElementById("face");
    //给对象 img 添加onload 事件监听
    img.onload = function() {
    //通过函数 drawImage 将图片绘制到画板上
    ctx.drawImage(img,0,0);
    }
    </script>　
  • 通过 JavaScript 的Image 对象//此方法不需插入图片
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    //建立 Image 对象
    var img = new Image();
    //通过 src 属性来加载图片
    img.src = "face.jpg";
    img.onload = function() {
    ctx.drawImage(img,0,0);
    }
    </script>　
  • drawImage 函数的三种函数模型 //注意参数只有这三种情况
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    //三个参数分别是要绘制的对象，对象在 canvas 中定位的坐标值 X、Y 。（图片
    左上角点）
    drawImage(image,dx,dy); //参数为3
    //后两个参数分别是要绘制图片的宽度和高度。
    drawImage(image,dx,dy,dw,dh); //参数为5
    //多的四个参数分别是要截取图片部分的起始位置坐标 X、Y ，相对起始位置的
    宽和高。（指的是在要绘制的图片上截取后绘制在 canvas 上）
    drawImage(image,,sx,sy,sw,sh,dx,dy,dw,dh); //参数为 9
    例子：
    img.onload = function() {
    ctx.drawImage(img,10,10);
    ctx.drawImage(img,260,10,100,100);
    ctx.drawImage(img,50,50,100,100,260,130,100,100);
    }

  • 利用 getImageData 和putImageData 绘制图片:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    var img = new Image();
    img.src = "face.jpg";
    img.onload = function() {
    //利用 drawImage 函数在canvas 上绘制图片。
    ctx.drawImage(img,10,10);
    ///利用 getImageData 函数获取canvas 上的图片数据，四个参数分别为：起始位
    置所谓坐标值 X、Y ，选择区域的长宽。（注意如果 canvas 区域中无绘制图片则
    取得空白）
    var imgData = ctx.getImageData(50,50,200,200); //获取的是已经绘制在 canvas 上的图
    像
    //利用函数 putImageData 将得到的像素数据绘制到画板上。七个参数分别是：
    像素数据、绘制图片的起始坐标 X、Y ，获取图片的起始位置X、Y，获取图片
    的长宽。（如果后面四个参数省略，则获取整个图片）
    ctx.putImageData(imgData,10,260);
    ctx.putImageData(imgData,200,260,50,50,100,100); //注意这里相差的四个参数
    };
    //在使用如 getImageData 这个函数时，为了阻止欺骗，浏览器会追踪 image data。
    当你把一个 “跟 canvas 的域不同的 ”图片放到 canvas 上，这个canvas 就成为
    “tainted”(被污染的，脏的 )，浏览器就不让你操作该 canvas 的任何像素。这对
    于阻止多种类型的 XSS/CSRF 攻击（两种典型的跨站攻击）。我在进行一个本地
    的html 网页，操作本地的一张图片时 chrome 浏览器也报错，可能是因为本地
    网页的域为 file://，而本地图片肯定不是以 file://开头的,如windows 环境下的某
    个图片为 : c:\tmp\test.png。（在测试 firbox 时没有问题）　

  • 利用 createImageData 新建像素:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    //createImageData(a,b) // 创建a*b 像素（长宽）的 imagaData 对象，不修改像素
    的话为白色，
    //代码
    img.onload = function() {
    var imageData = ctx.createImageData(100,100);
    for(var i =0;i<imageData.data.length;i+=4) { //像素设置
    imageData.data[i+0] = 255; //为红色
    imageData.data[i+1] = 0;
    imageData.data[i+2] = 0;
    imageData.data[i+3] = 255;
    }
    ctx.putImageData(imageData,0,0);
    }
    //也可以这样设置
    var imgData = ctx.getImageData(50,50,200,200);
    var imageData = ctx.createImageData(imgData);// 得到的只是像素大小　

变形：

  • scale 函数：放大、缩小、翻转：//利用 scale 函数实现图片的放大、缩小，两个参数分别对应 X、Y 轴坐标的放大
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    ctx.scale(3,3); //放在要绘画的图片的前面
    ctx.beginPath();
    strokeStyle = "#ccc";
    //绘制了一个矩形，由于 scale 函数，实际绘制的矩形坐标为 (30,30,450,300).
    ctx.strokeRect(10,10,150,100);
    //利用 scale 函数实现图片的缩小。
    ctx.scale(0.5,0.5);
    //注意使用scale 之后对接下来所有绘制的图片都有效；恢复的方法：如使用
    scale(2,2)之后，在想恢复的地方使用scale(0.5,0.5).；或者直接将scale 放在一个
    js 函数里调用。
     
    var img = new Image();
    img.src = "face.jpg";
    img.onload = function() {
    ctx.drawImage(img,10,10);
    //将函数 scaleY 轴参数设为负值，同时将 drawImage 函数的起始点 Y 轴设为负
    值，使图片翻转。
    ctx.scale(1,-1);
    ctx.drawImage(img,250,-250); //此时注意翻转后图片最上面的点为原图片最下
    面的点
    };

    //步骤总结：1.使用scale（1-1）将图片以canvas 最上边对称映射2.在设置图片位置时相对原来要设置的位置，y 轴取相应的负值（这里如果想象成坐标轴区域的话，也可以使用translate 进行平移，不过注意移动的符号）。同理可以实现左右翻转。 //scale 翻转后的恢复步骤同样；如果像上面一样在一个函数内调用则无需。

  • translate：//利用 translate 函数进行平移，两个参数分别是 X、Y 轴上平移的距离。//注意此函数移动的是 canvas 的坐标原点。
    ?
    1
    2
    3
    4
    5
    6
    7
    ctx.translate(50,100);
    ctx.beginPath();
    ctx.strokeStyle = "#000";
    //绘制的矩形平移后的坐标为（ 60，100 ，150， 100）相当于平移起始点坐标
    ctx.strokeRect(10,10,150,100);
    //与scale 一样的恢复步骤。
    //结合使用translate 与scale 也可以将绘制的图形进行翻转；<em id="__mceDel" style="line-height: 1.5; font-family: verdana, Arial, Helvetica, sans-serif; font-size: 14px; ">　　</em>
  • rotate：
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    ctx.beginPath();
    ctx.strokeStyle = "#000";
    ctx.strokeRect(200,50,100,50);
    //利用 rotate 函数，参数为旋转的弧度。（默认以（ 0，0 ）为中心进行顺时针旋
    转）
    ctx.rotate(45*Math.PI/180);
    ctx.beginPath();
    ctx.strokeStyle = "#f00";
    ctx.strokeRect(200,50,100,50);

    　　

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    以自己为中心进行旋转
    ctx.beginPath();
    ctx.strokeStyle = "#000";
    ctx.strokeRect(200,50,100,50);
    //先用 translate 函数将canvas 的起始坐标移到矩形中心处
    ctx.translate(250,75);
    //再用 rotate 函数使图像绕起始点（矩形中心点）旋转
    ctx.rotate(45*Math.PI/180);
    //最后用 translate 函数将canvas 的起始坐标移回（0，0）
    ctx.translate(-250,-75);
     
    ctx.beginPath();
    ctx.strokeStyle = "#f00";
    ctx.strokeRect(200,50,100,50);

    　　

　//总结：一些如颜色设置，大小、位置变化等都是作用与全局的，所以使用save与restore；图形的绘制最后的呈现结果可以理解为先绘制好这个图形，在根据顺序经历之前定义的变化，最后呈现结果。

posted @ 2015-04-02 09:43  dodo-yufan  阅读(279)  评论(0)    收藏  举报