HTML5-canvas 绘图

富应用：  漂亮的图片，  人机互动功能， 以及炫目的动画效果；

Canvas 画布：   canvas 独特的地方是 需要javascript 来操作，  不使用javascript 就无法绘制图形， 也不能画出图画。   这意味着canvas 是一个编程工具， 而这已然超出了web基于文档的设计初衷。

Canvas 并在其中绘制线条，曲线 和 简单的图形，   超级强大的绘图工具， 它可以帮你完成所有绘图任务， 比如绘制矩形， 输出纹板，  嵌入图像........... 总之所有绘图操作都是通过canvas完成的！！！！！！

Canvas起步：  

   <canvas> 元素就是一块画布， 指定三个属性即可：  id, width 和 height。

   <canvas id="drawingCanvas" width="500" height="300"> </canvas>

  canvas {

       border: 1px dashed black;

    }

    var canvas = document.getElementById("drawingCanvas");

     var  context = canvas.getContext("2d");

     context.moveTo(10, 10);  //起点

     context.lintTo(400,40);   //终点

     context.stroke();   //显示出来；

Canvas 可以画出下面的相关东东：

    直线；

     路径与形状；

     曲线；

      变换；

     透明度；

     合成操作：  两个重叠的图形， 可以合成 叠加；

      动态图片； 图像上面添加阴影， 使用图案和渐变填充；

      绘制图像： context.drawImage(img, 10, 10);

      播放动画；

      在像素级别上处理图像；

      创建交互游戏；

      

    

绘制图像：

   1， 使用createImageData() 方法一个像素一个像素地创建图像， 效率低下；   context.drawImage(img, 10, 10);

    2， 使用网页中已有的 <img> 元素，

         <img id="arrow_left"  src="arrow_left.png");

          var img = document.getElementById("arrow_left");

           context.drawImage(img, 10, 10);

      3,  代码中创建img 对象

        var img = new Image();

         img.src = "maze.png";

          context.drawImage(img, 10, 10);

裁剪，切割和伸缩图片：

   context.drawImage(img, 10, 10， 30， 30);   //指定图像大小， 达到伸缩的效果

    context.drawImage(img, source_x, source_y, source_width, source_height, 10, 10， 30， 30);   //裁剪， 切割

    

绘制文本：

   context.font = "bold 20 px Verdana, sans-serif"

   context.textBaseline = "top";

   context.fillStyle = "black";

    context.fillText("I'am stuck in a canvas, someone let me out 1"， 10， 10）；

阴影和填充：

   

填充图案：

填充渐变：

赋予图形交互能力：

    可以选择某些图形， 进行点击， 移动等等。。。。

给Canvas添加动画：

    setTimeout()

    setInterval() 函数