html5 canvas 标签绘制图像且渐变色处理

       html5 提供了很多很强大的功能，有些功能甚至可以摆脱服务器的限制，减少对服务器的访问。canvas就是一个html5 新增的强大标签。虽然功能有待完善，但已然可以解决一些网页问题。

      今天主要讲canvas的网页绘制图像的功能，它有点像VC的windows API。

         在html中添加如下

        <canvas id="my" width="200" height="100">您的浏览器版本过低</canvas>

       <script>

        var c=document.getElementById("my");//寻找canvas对象

        var context=c.getContext("2d");//      getContext(2d)是内建的HTML5对象拥有多种绘画路径，矩形，圆形，字符以及添加图像的方法

         //绘画矩形

        context.fillStyle="#ccc";// 填充色，对闭合图形起作用

        context.fillRect(0,0,150,75);//前两个参数为左上方坐标，后两个为右下方

        //绘画直线

        context.strokeStyle="#000";//画笔颜色

        context.lineWidth=2;//画笔粗细,注意：没有单位

        context.beginPath();//开始划线

        context.moveTo(20,0);//起点

        context.lineTo(20,20);//终点

        context.stroke();//结束划线

       //绘画折线图案

        context.fillStyle="#ccc";// 填充色，对闭合图形起作用

        context.strokeStyle="#000";//画笔颜色

        context.lineWidth=2;//画笔粗细,注意：没有单位

        context.beginPath();//开始划线

        context.moveTo(20,0);//起点

        context.lineTo(20,20);//下个点

        context.lineTo(20,40);//终点

       context.fill();//自动连接头尾，并用填充色填充闭合图形

        context.closePath();//结束路径

        //添加文本

       context.font="italic bold 24px serif";//设置文本的风格，[font style] [font weight] [font size] [font face]四个参数

        context.fillText("文本",10,20);//添加文本，后两个表示开始添加的位置

      //渐变效果

        var gradient=context.createLinearGradient(0,0,0,40);//前两个参数为渐变开始的横纵坐标，后两个为渐变结束点的横纵坐标
        gradient.addColorStop(0,"color1");//起始颜色
        gradient.addColorStop(1,"color2");//终止颜色
        context.fillStyle=gradient;
        context.strokeStyle=gradient;

 </script>