canvas （smile）

今天我在学习html5新增加的标签——canvas 画布，他像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图 ，最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。

    context:一直觉得这个翻译成“上下文”真够蛋疼的，context是一个封装了很多绘图功能的对象，获取这个对象的方法是  

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

    canvas元素绘制图像的时候有两种方法，分别是

        context.fill()//填充

        context.stroke()//绘制边框

    style:在进行图形绘制前，要设置好绘图的样式

        context.fillStyle//填充的样式

        context.strokeStyle//边框样式

        context.lineWidth//图形边框宽度

    颜色的表示方式:

         直接用颜色名称:"red" "green" "blue"

         十六进制颜色值: "#EEEEFF"

         rgb(1-255,1-255,1-255)

         rgba(1-255,1-255,1-255,透明度)

     绘制矩形  context.fillRect(x,y,width,height)  strokeRect(x,y,width,height)

     清除矩形区域 context.clearRect(x,y,width,height)

     圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)

     路径  context.beginPath()    context.closePath()

---

    细心的朋友会发现上面的画圆并不单单是直接用arc还用到了context的 beginPath   和closePath方法

    绘制线段 context.moveTo(x,y)  context.lineTo(x,y)

    绘制贝塞尔曲线（贝济埃、bezier） context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 

    绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

    线性渐变 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)

    线性渐变颜色lg.addColorStop(offset,color)

    canvas 还有一些其他的方法，我就不一一例举出来咯

   下面是我用canvas写的一个canvas小例子，比较简单

   如果要写一些复杂一点的效果，js是功底一定要深厚。

html代码：

<canvas id="canvas" width='400' height="300">你的浏览器不支持canvas</canvas>

js代码：

function drawRadian(){
       var context = document.getElementById('canvas').getContext('2d');
       context.beginPath();
       context.strokeStyle = "rgb(0,0,0)";
       context.arc(100,100,100,0,2*Math.PI,true);
       context.closePath();
       context.fillStyle = 'rgb(244,86,86)';
       context.fill();    
       
       context.beginPath();
       context.arc(50,75,25,0,2*Math.PI,true);
       context.fillStyle = 'rgb(0,0,0)';
       context.fill();
       
       context.beginPath();
       context.arc(150,75,25,0,2*Math.PI,true);
       context.fillStyle = 'rgb(0,0,0)';
       context.fill();
       
       context.beginPath();
       context.arc(150,75,25,0,2*Math.PI,true);
       context.fillStyle = 'rgb(0,0,0)';
       context.fill();
       
       context.beginPath();
       context.arc(100,125,10,0,2*Math.PI,true);
       context.fillStyle = 'rgb(0,0,0)';
       context.fill();
       
       context.beginPath();
       context.strokeStyle = "rgb(0,0,0)";
       context.lineWidth = 5;
       context.arc(100,150,25,Math.PI/6,5*Math.PI/6,false);
       
       context.stroke();
       
}  

效果图：

                                                                                           

希望对小伙伴的你有所帮助，如果其中有什么不妥当的地方，请多多指出，在这里真诚的感谢你！