文字对齐方式 :

• 水平对齐

  //是用 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="http://www.mamicode.com/face.jpg" alt="The Face" width="240" height="240" /></br> //注意 img 最后完整”/”，否则可能显示不出来。*****************************************************************<script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");//在 canvas 中获取<img>标签idvar 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 = "http://www.mamicode.com/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 = "http://www.mamicode.com/face.jpg";img.onload = function() {//利用 drawImage 函数在canvas 上绘制图片。ctx.drawImage(img,10,10);///利用 getImageData 函数获取canvas 上的图片数据，四个参数分别为：起始位置所谓坐标值 X、Y ，选择区域的长宽。（注意如果 canvas 区域中无绘制图片则取得空白）var imgData = http://www.mamicode.com/ctx.getImageData(50,50,200,200); //获取的是已经绘制在 canvas 上的图>

• 利用 createImageData 新建像素:

  //createImageData(a,b) // 创建a*b 像素（长宽）的 imagaData 对象，不修改像素的话为白色，//代码img.onload = function() {var imageData = http://www.mamicode.com/ctx.createImageData(100,100);>

  　　

  　　

HTML-Canvas02