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);// 得到的只是像素大小