HTML5学习笔记（5）使用Canvas画图（下）— 绘制图像和文字

1. 绘制图像

API是drawImage(), 常用语法是drawImage（image,x,y,width,height）

例子1：不同形式显示一张图片

<canvas id="myCanvas" height=1000 width=1000>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function draw()
{
  var c=document.getElementById("myCanvas");  // 获取网页中的canvas对象
  var ctx=c.getContext("2d");  //获取canvas对象的上下文
  var imageObj = new Image();  // 创建图像对象
  imageObj.src = "XXX.jpg";  // 获得当前目录下的图像

  imageObj.onload = function(){   
      ctx.drawImage(imageObj, 0, 0); // 完整显示
      ctx.drawImage(imageObj, 250, 0, 120, 160);  // 改变图像大小显示
      ctx.drawImage(imageObj, 0, 100, 240, 160, 400, 0, 240, 160);  //选择图像一部分显示
   }; 
}
window.addEventListener("load", draw, true);
</script>

例子2：组合图像显示

<canvas id="myCanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function draw()
{
  var c=document.getElementById("myCanvas") // 获取网页中的canvas对象	
  var ctx=c.getContext("2d")                // 获取canvas对象的上下文
  ctx.fillStyle = "yellow"                  // 填充图形内部的颜色为黄色
  ctx.fillRect(50,50, 100, 100)             // 矩形的宽度和高度为100，内部填充黄色

  ctx.fillStyle = "red"
  ctx.globalCompositeOperation = "soure-over"  //覆盖填充

  var centerX = 150
  var centerY = 150
  var radius = 50
  var startAngle = 0
  var endiAngle = 2 * Math.PI

  ctx.beginPath()// 开始绘图路径
  ctx.arc(centerX, centerY, radius, startAngle, endiAngle, false) //绘制圆
  ctx.fill()   
} 

window.addEventListener("load", draw, true)
</script>

PS：目前发现用sublime的view in browser看HTML程序编写的效果有个问题，如果代码写错就会是全白，但是并不会显示是哪一行代码出现问题

调试方法：

（1）运用document.write()或alert（）输出变量的值

（2）用chrome中工具的开发者工具，或者直接按F12

2.  输出文字

可以使用strokeText（）方法在画布的指定位置输出文字，语法如下：

strokeText（string text，float x， float y）这样输出的文字是中空的，可以通过fillText输出文字，内部是填充了颜色的。

<canvas id="myCanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function draw()
{
  var c=document.getElementById("myCanvas");  // 获取网页中的canvas对象
  var ctx=c.getContext("2d");  //获取canvas对象的上下文

  var Colordiagonal = ctx.createLinearGradient(100,100, 300,100);
  Colordiagonal.addColorStop(0, "yellow");
  Colordiagonal.addColorStop(0.5, "green");
  Colordiagonal.addColorStop(1, "red"); 
  ctx.fillStyle = Colordiagonal;
  ctx.font = "30pt 隶书";
  ctx.fillText("浙江理工大学", 50, 50);  //渐变填充文字
  ctx.strokeText("天津大学", 100, 100); //位置
}

window.addEventListener("load", draw, true);
</script>

PS：分号可以写，也可以不写，但一定要写对，是英文输入法的;

3. 图像操作

（1）保存和恢复绘图状态

可以调用Context.save()方法保存当前的绘图状态，Canvas是以堆(stack)的方式保存绘图状态的，调用Context.restoe()可以从堆中弹出之前保存的绘图状态。

<canvas id="myCanvas" height=500 width=500> </canvas>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillStyle = 'red'
ctx.fillRect(0,0,150,150);
ctx.save(); 

ctx.fillStyle = 'green' 
ctx.fillRect(45,45,60,60); 
ctx.restore(); 

ctx.fillStyle = 'black'
ctx.fillRect(60,60,30,30); 
}
window.addEventListener("load", draw, true);
</script>

（2）图形的变换

平移：translate（x,y）  // x是x坐标轴缩放比例，y是y坐标轴缩放比例

缩放：scale（x,y）

旋转：rotate（angle）

变形：setTransform（m11, m12, m21, m22, dx, dy）假设（x,y）经过变形为(X, Y)，

变形的公式为:X=m11*x + m21*y + dx

                       Y = m12*x  + m22*y +dy

<canvas id="myCanvas" height=550 width=550>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function draw()
{
  var canvas=document.getElementById("myCanvas");  // 获取网页中的canvas对象
  var context = canvas.getContext("2d"); //获取canvas对象的上下文
  context.save(); //保存了当前context的状态

  context.fillStyle = "red";
  context.fillRect(0, 0, 400, 300);

  context.fillStyle = "blue";
  context.fillRect(0, 0, 100, 100);      //正方形

  context.fillStyle = "green";
  //平移 缩放 旋转  1 2 3        
  context.translate(100, 100);           //坐标原点平移(100, 100)
  context.scale(0.5, 0.5);               //x,y轴是原来一半
  context.rotate(Math.PI / 4);           //旋转45度
  context.fillRect(0, 0, 100, 100);      //平移 缩放 旋转后的正方形

  context.restore(); // 恢复之前保存的绘图状态, 如果没有恢复，就接下来画的图也会进行移动等操作
  //
  context.fillStyle = "black";
  context.beginPath();  //  开始绘图路径
  // context.arc(200, 50, 50, 0,  2 * Math.PI, false); 
  context.arc(50, 50, 50, 0,  2 * Math.PI, false); 
  context.stroke();
  context.fill();

}
window.addEventListener("load", draw, true);
</script>

4.绘制图像动画

动画是通过一幅幅静止的，内容不同的画面（帧）快速播放，人类视觉残留的视觉大约为1/24秒。所以在计算机上哟啊实现动画效果，要能实现定期绘图 和 清除先前绘制的图像。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Canvas实现游戏人物的跑步动画</title>
  </head>
  <script type="text/javascript"> 
    var imageObj = new Image(); // 创建图像对象
    var x =300; 
    var n =0;                   // 计数器

    function init()
    {
      imageObj.src = 'XXX.jpg';
      imageObj.onload = function(){
         setInterval(draw,100);// 定时器，每0.1秒执行一次draw()函数
      };
    }

    function draw()
    {
        var canvas=document.getElementById("myCanvas");  // 获取网页中的canvas对象
        var ctx = canvas.getContext("2d"); //获取canvas对象的上下文
         
           ctx.clearRect(0,0,300,300); // 清除canvas画布 
 
           //从原图(60*n)位置开始截取中间一块宽60*高80的区域，显示在屏幕(x,0)处           
           ctx.drawImage(imageObj, 60*n, 0, 60, 80, x, 0, 60, 80);
           if(n>=8){
              n=0;
           }else{
              n++;
           }
           if(x>=0){
              x=x-30;  //前移30像素
           }else{
              x=300;   //回到右侧
           }       
    }
    window.addEventListener("load", init, true);
  </script>

  <body>
    <canvas id="myCanvas" width="300" height="300"></canvas>
  </body>
</html>