html5--画布

简介

canvas是HTML5中的新元素，你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
所以一句话就是：HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

 

画矩形

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <canvas id="first" width="200" height="100"></canvas>
        
        <!--canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：-->
        <script type="text/javascript">
            var first=document.getElementById("first");//JS 使用 id 来寻找 canvas 元素
            var cxt=first.getContext("2d");//然后，创建 context 对象：getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
            
            //下面的两行代码绘制一个红色的矩形：
            cxt.fillStyle="#FF0000";//fillStyle 方法将其染成红色
            cxt.fillRect(0,0,150,75);//fillRect 方法规定了形状、位置和尺寸
        </script>
    </body>
</html>

 

 

画(线性)渐变矩形

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <canvas id="first" width="200" height="100"></canvas>
        
        <script type="text/javascript">
            var first=document.getElementById("first");
            var cxt=first.getContext("2d");
            
            /*
            createLinearGradient() 方法:创建线性的渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。
            context.createLinearGradient(x0,y0,x1,y1):x0/x1 渐变开始/结束点的 x 坐标, y0/y1 渐变开始/结束点的 y 坐标
            */
            
            var mycolor=cxt.createLinearGradient(0,0,150,75);//
            mycolor.addColorStop(0,"white");
            mycolor.addColorStop(0.5,"red");


            cxt.fillStyle=mycolor;
            cxt.fillRect(0,0,150,75);
            
            
        </script>
    </body>
</html>

 

 

画圆

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
        <title></title>
    </head>
    <body>
        <canvas id="first" width="100" height="100"></canvas>
        
        <script type="text/javascript">
            var first=document.getElementById("first");
            var cxt=first.getContext("2d");
            
            
            cxt.beginPath();//【开始路径】
            cxt.fillStyle="red";
            var circle = {
                x : 50,    //圆心的x轴坐标值
                y : 50,    //圆心的y轴坐标值
                r : 30,    //圆的半径
                startAngle : 0,     //圆开始的角度
                endAngle: Math.PI*2,//圆结束的角度
                Br:true    //true是逆时针.
            };
            cxt.arc(circle.x, circle.y, circle.r,circle.startAngle, circle.endAngle, circle.Br);
            cxt.closePath();//【结束路径】
            
            
            
            cxt.fill();//填充当前的图像（路径）。默认颜色是黑色。
        </script>
    </body>
</html>

 

 

画圆时，理解startAngle与endAngle

 

posted @ 2016-04-14 11:07  丁少华  阅读(198)  评论(0)  编辑  收藏  举报