HTML-Canvas02

文字对齐方式 :

• 水平对齐

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

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

• 垂直对齐:

  //是用 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>标签//此方法要插入图片

  //先在 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 对象//此方法不需插入图片

  <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 函数的三种函数模型 //注意参数只有这三种情况

  //三个参数分别是要绘制的对象，对象在 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 绘制图片:

  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 新建像素:

  //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 轴坐标的放大

  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 的坐标原点。

  ctx.translate(50,100);
  
  ctx.beginPath();
  
  ctx.strokeStyle = "#000";
  
  //绘制的矩形平移后的坐标为（ 60，100 ，150， 100）相当于平移起始点坐标
  
  ctx.strokeRect(10,10,150,100);
  
  //与scale 一样的恢复步骤。
  
  //结合使用translate 与scale 也可以将绘制的图形进行翻转；　　

• rotate：

  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);
  
  

  　　

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