html5之canvas初解

　　<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。　

 <canvas id="myCanvas">您的浏览器版本不支持Canvas标签</canvas>
 <script>
     window.onload = function(){
         var my_canvas = document.getElementById("myCanvas");
         var ctx = my_canvas.getContext("2d");
         alert(ctx);
     }
 </script>

填充样式fillStyle和笔触样式strokeStyle

　　属性值有：

　　

• 颜色
• 渐变对象gradient又可以分为线性渐变对象linearGradient和反射性渐变对象radialGradient，他们通过getContext()返回的对象进行创建。

      var my_gradient = ctx.createLinearGradient(0,0,150,0);   //创建一个线性渐变对象,参数表示开始点坐标和结束点坐标
   　　my_gradient.addColorStop(0, "black");                    //0位置时颜色
   　　my_gradient.addColorStop(0.5, "green");                  //0.5位置时颜色
   　　my_gradient.addColorStop(1, "white");                    //1位置时颜色
  
   　　var my_radial = ctx.createRadialGradient(100,70,5,100,70,100);//创建一个反射状渐变对象，开始圆坐标,开始圆半径,结束圆坐标,结束圆半径
   　　my_radial.addColorStop(0,"white");
   　　my_radial.addColorStop(1,"red");
  
   　 ctx.fillRect(0,0,500,500);

　　

• pattern

     var img = document.getElementById("search");
     var my_pattern = ctx.createPattern(img, "repeat");    //创建patter对象,规定要使用的模式的图片、画布或视频元素。
     ctx.fillStyle = my_pattern;

     cxt.fillRect(0,0,500,500);

　　

阴影样式

     <canvas id="myCanvas" width="400" height="400">您的浏览器版本不支持canvas标签</canvas>
     <!--
         总结：阴影样式属性有
             shadowColor      阴影颜色
             shadowBlur       阴影模糊程度
             shadowOffsetX    阴影x轴偏移
             shadowOffsetY    阴影y轴偏移
     -->
     <script>
         window.onload = function(){
             var my_canvas = document.getElementById("myCanvas");

             var ctx = my_canvas.getContext("2d");

             ctx.shadowColor = "#000000"; //阴影颜色
             ctx.shadowBlur = "30";       //模糊级别，默认为0,即设置shadowColor同时也必须设置shadowBlur，否则不显示阴影，值越小颜色越深，值越大颜色越模糊
             ctx.shadowOffsetX = "20"     //阴影沿x轴偏移距离,可正可负
             ctx.shadowOffsetY = "20";    //阴影沿y轴偏移距离

             ctx.fillStyle = "#00FF00";   //填充样式 green绿色
             ctx.fillRect(50,50,200,100); //填充矩形
         };
     </script>

线条样式

　　

图形

• 矩形（在fill和stroke之前设置fillStyle和strokeStyle显示不同的样式）

       var cxt = my_canvas.getContext("2d");
  
       cxt.fillRect(100,100,200,200);    //填充矩形
  
       cxt.strokeRect(0,0,400,400);  　　//画矩形
       //等同于
       cxt.rect(20,20,40,40);    　　　　//创建rect对象
       cxt.stroke();

  

• 圆

       var cxt = my_canvas.getContext("2d");
  
       cxt.arc(100,100,50,0,2*Math.PI);      //创建一个圆，参数：圆心坐标，圆半径，起始角度，结束角度(角度以PI为单位)
       cxt.stroke();                        //绘制    

  

　矩形和圆的绘制都属于线条的绘制，当然也可以使用strokeStyle和线条样式了。

线条

• 直线

       var cxt = canvas.getContext("2d");
       // 直线
       cxt.moveTo(200,120);
       cxt.lineTo(200,50);        //线尾坐标
       cxt.stroke();

• 曲线，贝塞尔曲线和弧线　

     cxt.beginPath();
     cxt.moveTo(20,20);
     cxt.quadraticCurveTo(20,100,200,20);    //二次贝塞尔曲线
     cxt.stroke();

     cxt.beginPath();
     cxt.moveTo(100,100);
     cxt.bezierCurveTo(100,400,200,100,400,100);    //三次贝塞尔曲线
     cxt.stroke();

　　

     // 弧线（其实画圆就是画弧）
     cxt.beginPath();
     cxt.arc(200,200,100,0, 2*Math.PI);    //圆弧
     cxt.stroke();

     cxt.beginPath();
     cxt.arc(200,200,50, 0, Math.PI);    //半圆弧
     cxt.stroke();

     cxt.beginPath();
     cxt.arc(150,180,25,Math.PI,0);        //半圆弧
     cxt.stroke();

     cxt.beginPath();
     cxt.arc(250,180,25,Math.PI,0);        //半圆弧
     cxt.stroke();

　　

文本　

     var cxt = my_canvas.getContext('2d');
     //字体样式
     cxt.font = "bold 30px 微软雅黑";
     cxt.strokeText("Hello World!", 100,100);    //画文本字(空心)

     cxt.fillText("Hello Canvas!", 100,150);        //填充字体(实心)

图片绘制

 <p>图片:
         <img src="./images/niurong.jpg" id="img"/>
     </p>
     <p>canvas:
         <canvas id="myCanvas" width=360 height=360>您的浏览器版本不支持canvas标签</canvas>
     </p>
     <script>
         //    drawImage(img, x0, y0);        绘制图片到(x0,y0)坐标上
         window.onload = function(){
             var img = document.getElementById("img");
             var my_canvas = document.getElementById("myCanvas");
             var cxt = my_canvas.getContext('2d');

             cxt.drawImage(img,0,0);
15　　　　　}

　　

　　我们把一张图片复制到canvas中，然后这张图片就任我们揉捏了，嘿嘿...　　现在我们要把《被牛肉片包围的头像》中教皇的头像裁剪出来

　　只需 cxt.drawImage(img,115, 155, 75, 95, 0, 0, 75, 95); 这就就ok了。需要测算出该头像位于该图片的坐标以及宽度、高度即可。

　　

　　注意：drawImage函数参数

　　　　

像素操作

　　假如你拥有了操作像素的能力，那么你就拥有了改变世界的能力。——LHAT语录

     var imgData = cxt.createImageData(100,100);    //创建一个100×100像素的imageData对象
     for(var i=0; i<imgData.data.length; i+=4){
         imgData.data[i+0] = 0;        //R
         imgData.data[i+1] = 255;    //G
         imgData.data[i+2] = 0;        //B
         imgData.data[i+3] = 200;    //透明度,255表示不透明
     }
     cxt.putImageData(imgData, 300, 300);    //将imageData对象添加到画布中

　　

　　电脑、手机上的图片都是有一个个像素组成的，这没错，假若我知道了一幅图片所有像素的位置、颜色，那么我就能完美复制该图片。

     <p>
         <img src="./images/shouhui3.jpg" id="img" style="border:1px solid #aaa"/>
         <canvas id="myCanvas" width="209" height="220" style="border:1px solid #aaa">您的浏览器版本不支持canvas标签</canvas>
     </p>
     <script>
         window.onload = function(){
             var img = document.getElementById("img");
             var my_canvas = document.getElementById("myCanvas");
             var cxt = my_canvas.getContext("2d");
             cxt.drawImage(img,0,0);

             var imgData = cxt.getImageData(0,0,my_canvas.width,my_canvas.height);
             for(var i=0; i<imgData.data.length; i+=4){
                 imgData.data[i+0] = 255 - imgData.data[i+0] ;
                 imgData.data[i+1] = 255 - imgData.data[i+1] ;
                 imgData.data[i+2] = 255 - imgData.data[i+2] ;
                 imgData.data[i+3] = 255 ;
             }
             cxt.putImageData(imgData,0,0);
         };
     </script>