首页手记使用canvas绘制简单图形（上）

使用canvas绘制简单图形（上）

标签：

Html/CSS Html5 JavaScript

绘制直线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas{border:1px solid;width: 200px;height: 100px;}
    </style>
</head>
<body>
    <canvas id="myCanvas">
        浏览器不支持canvas元素时显示该文本内容
    </canvas>
    <script type="text/javascript">
        //获取canvas#myCanvas元素
        var c=document.getElementById("myCanvas");
        //通过canvas元素的getContext方法来获取其上下文，
        //即创建Context对象，获取允许进行绘制的2D环境
        //(允许使用3d字符串参数）
        var context=c.getContext("2d");
        //moveTo方法用于建立新的子路径，并规定其起点（x，y）
        context.moveTo(0,0);
        //lineTo方法用于规定直线终点（x，y）
        context.lineTo(200,100);
        //stroke方法用于沿路径绘制一条直线
        context.stroke();
    </script>
</body>
</html>

绘制矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas{border:1px solid;width: 200px;height: 100px;}
    </style>
</head>
<body>
    <canvas id="myCanvas">
        浏览器不支持canvas元素时显示该文本内容
    </canvas>
    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var context=c.getContext("2d");
        //fillStyle属性用于指定绘制图形的填充颜色
        context.fillStyle="#ff00ff";
        //fillRect属性用于要绘制的图形的位置与尺寸，
        //坐标（0,0）表示从（0,0）为起点，
        //而（200,100）表示图形宽200像素，高100像素
        context.fillRect(0,0,200,100);
    </script>
</body>
</html>

若如上面两个例子这样，你会发现运行代码时显示的并不像自己想象的那样，那是因为我们将canvas的宽高样式写在了内部样式，为了解决这个问题，我们要将canvas的宽高样式写在内联样式中，如下所示：

绘制直线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas{border:1px solid;}
    </style>
</head>
<body>
        <!--将宽高样式写在内联样式中的style属性也不能达到我们要的效果-->
    <canvas id="myCanvas"  width="200px" height="100px">
        浏览器不支持canvas元素时显示该文本内容
    </canvas>
    <script type="text/javascript">
        //获取canvas#myCanvas元素
        var c=document.getElementById("myCanvas");
        //通过canvas元素的getContext方法来获取其上下文，
        //即创建Context对象，获取允许进行绘制的2D环境
        //(允许使用3d字符串参数）
        var context=c.getContext("2d");
        //moveTo方法用于建立新的子路径，并规定其起点（x，y）
        context.moveTo(0,0);
        //lineTo方法用于规定直线终点（x，y）
        context.lineTo(200,100);
        //stroke方法用于沿路径绘制一条直线
        context.stroke();
    </script>
</body>
</html>

绘制矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas{border:1px solid;}
    </style>
</head>
<body>
        <!--将宽高样式写在内联样式中的style属性也不能达到我们要的效果-->
    <canvas id="myCanvas"  width="200px" height="100px">
        浏览器不支持canvas元素时显示该文本内容
    </canvas>
    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var context=c.getContext("2d");
        //fillStyle属性用于指定绘制图形的填充颜色
        context.fillStyle="#ff00ff";
        //fillRect属性用于要绘制的图形的位置与尺寸，
        //坐标（0,0）表示从（0,0）为起点，
        //而（200,100）表示图形宽200像素，高100像素
        context.fillRect(0,0,200,100);
    </script>
</body>
</html>

若我们只想绘制一个矩形的轮廓而不想填充则可以使用stroke()方法，请看下面例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas{border:1px solid;}
    </style>
</head>
<body>
        <!--将宽高样式写在内联样式中的style属性也不能达到我们要的效果-->
    <canvas id="myCanvas"  width="200px" height="100px">
        浏览器不支持canvas元素时显示该文本内容
    </canvas>
    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var context=c.getContext("2d");
        //fillStyle属性用于指定绘制图形的填充颜色
        context.strokeStyle="#ff00ff";
        //fillRect属性用于要绘制的图形的位置与尺寸，
        //坐标（0,0）表示从（0,0）为起点，
        //而（200,100）表示图形宽200像素，高100像素
        context.strokeRect(0,0,200,100);
    </script>
</body>
</html>

点击查看更多内容