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；图形的绘制最后的呈现结果可以理解为先绘制好这个图形，在根据顺序经历之前定义的变化，最后呈现结果。