canvas基础使用

画布（canvas）的简单使用

最简单的画矩形

<canvas width="300px" height="300px" id="drawing">
   there is canvas
 </canvas>
 <script>
     window.onload = function () {
         var drawing = document.getElementById("drawing")
         console.log(drawing)
         if (drawing.getContext) {
             var context=drawing.getContext("2d");

             context.fillStyle="red";
             context.fillRect(10,10,50,50)
             context.fillStyle="rgba(0,0,255,0.5)"
             context.fillRect(30,30,50,50)
             context.clearRect(40,40,10,10)
         }
     }
</script>

效果：

理解一下：

• drawing.getContext(“2d”) 表明我要2D绘图，返回一个2D上下文。
• fillStyle 设定填充的颜色
• fillRect(x坐标，y坐标，x方向长度，y方向长度) 画矩形，
• clearRect(x坐标，y坐标，x方向长度，y方向长度) 清除区域内容

好了，矩形会了，开始画圆。

<canvas id="drawing" width="200 " height="200">
 </canvas>
  <script>
      window.onload=function(){
          var drawing=document.getElementById("drawing")
          if(drawing.getContext){
              var context=drawing.getContext("2d")
              context.beginPath();
              context.arc(100,100,99,0,2*Math.PI,false);
              context.moveTo(194,100);
              context.arc(100,100,94,0,2*Math.PI,false)
              context.moveTo(100,100)
              context.lineTo(100,15)
              context.moveTo(100,100)
              context.lineTo(35,100)
			//设置字体，水平对其方式，以文本及基准线
              context.font="bold 14px Arial"
              context.textAlign="center"
              context.textBaseline="middle"
              //设置填充字体 以及位置
              context.fillText("12",100,20)
              
              context.stroke();
              // context.closePath();
          }
      }
  </script>

效果（比较像钟）：

理解一下：

• beginPath() 表示我要开始画了，指开始画路径
• arc(x坐标，y坐标，开始角度，结束角度，是否逆时针） 以（x,y）为圆心画圆。说明一下，0角度开始是在水平右手边。
• context.moveTo(194,100); 这一步是为了避免出现多余的线，提前将点一到第二个圆的圆弧上，这个方法是移动点
• lineTo(x坐标，y坐标) 从当前坐标到（x,y）画一条线
• stroke() 方法 对路径进行描边，没有它是显示不出效果的。

然后，绘制图像

<img src="../image/1.png" width="100" height="100">
    <canvas id="drawing" width="200" height="200">

    </canvas>
    <script>
        window.onload=function(){
            var drawing=document.getElementById("drawing")
            if(drawing.getContext){
                var context=drawing.getContext("2d")
                var image=document.images[0]
                //整个图像
                context.drawImage(image,0,0,50,50)
                //  截取局部
                context.drawImage(image,50,50,30,40,100,100,60,80)
            }
        }
        
    </script>

效果：

理解一下 drawImage（）方法：

• 五个参数的，分别为要绘的图像，x坐标，y坐标，宽度，高度
• 9个参数的，分别为要绘的图像，原图x坐标，原图y坐标，原图宽度，原图高度，x坐标，y坐标，宽度，高度。可以截取原图的部分进行显示。

渐变-线性

<canvas id="drawing" width="200" height="200">

    </canvas>
    <script>
        window.onload=function(){
            var drawing=document.getElementById("drawing")
            if(drawing.getContext)
            {
                var context=drawing.getContext("2d");
                // 创建渐变对象
                var gradient=context.createLinearGradient(30,30,70,70);
                // 设定颜色变化区间
                gradient.addColorStop(0,"blue");
                gradient.addColorStop(1,"red")
                context.fillStyle="#ff0000"
                context.fillRect(10,10,50,50)
                //  在填充颜色这里应用渐变对象
                context.fillStyle=gradient
                //  要注意矩形和渐变对象的区域要匹配，不然没效果。下面为示例，因为矩形在渐变的中部，渐变差不多结束了，所以只有左上角有点效果。
                context.fillRect(50,50,50,50)
                // context.fillRect(30,30,50,50)
            }
        }
    </script>

效果：

渐变-放射

<canvas id="drawing" width="200" height="200">

    </canvas>
    <script>
        window.onload=function(){
            var drawing=document.getElementById("drawing")
            if(drawing.getContext)
            {
                var context=drawing.getContext("2d");
                // 这里的6个参数分别是两个圆的信息，分别是起始圆坐标（x,y）以及半径
                // 终止圆坐标(x,y)以及半径
                var gradient=context.createRadialGradient(55,55,10,55,55,30);
                gradient.addColorStop(0,"white");
                gradient.addColorStop(1,"black")
                context.fillStyle="#ff0000"
                context.fillRect(10,10,50,50)
                context.fillStyle=gradient
                context.fillRect(30,30,50,50)
            }
        }
    </script>

效果：

模式（用于描边和填充）

<img src="../image/小图.jpg" width="30" height="30">
    <canvas id="drawing" width="200" height="200">

    </canvas>
    <script>
        window.onload=function(){
            var drawing=document.getElementById("drawing")
            if(drawing.getContext)
            {
                var context=drawing.getContext("2d");
                var image=document.images[0]
                // 不是按img中显示的大小填充，它是以原图片大小计算的
                var pattern=context.createPattern(image,"repeat")
                context.fillStyle=pattern
                context.fillRect(0,0,150,150)
                
            }
        }
    </script>

效果：

使用图像数据（可用于颜色处理）

<img src="../image/小图.jpg">
    <canvas id="drawing" width="200" height="200">

    </canvas>
    <script>
        window.onload=function(){
            var drawing=document.getElementById("drawing")
            if(drawing.getContext)
            {
                var red,blue,green,average;
                var context=drawing.getContext("2d");
                var image=document.images[0]
                context.drawImage(image,0,0)
                // 处理的是原图大小，而不是img中显示的大小
                var imageData=context.getImageData(0,0,image.width,image.height)
                var data=imageData.data;
                for(var i=0,len=data.length;i<len;i+=4){
                    red=data[i];
                    green=data[i+1];
                    blue=data[i+2];
                    average=Math.floor((red+green+blue)/3)
                    data[i]=average;
                    data[i+1]=average;
                    data[i+2]=average;
                }
                imageData.data=data;
                context.putImageData(imageData,0,0)
            }
        }
    </script>

效果：

理解一下：
data中存储的是图像的每个像素中的数据，四个一组，分别是红，绿，蓝，透明度。这里我把三色折中，使得彩色变成了黑白。