HTML5-Canvas绘制（1）

绘制直线和多边形

第一步：定义canvas
第二步：获取cancas和context
第三步：绘制直线 , 通过上下文绘制直线和图形

第一步：定义canvas

<canvas id="canvas" width="500" height="500"
        style="border:1px solid #aaa; display:block; margin: 50px auto">
    </canvas>

第二步：获取cancas和context
在window.onload = function() 中
通过doucument.getElementById(“canvas”)获取canvas

window.onload = function() {
            var mCanvas = document.getElementById("canvas");
            var mContext = canvas.getContext("2d");
            }

第三步：绘制直线 , 通过上下文绘制直线和图形
mContext.moveTo(x, y) 起点
mContext.lineTo(x0, y0)定义执行的终点或者多边形的经过点

注意：

使用两个方法是状态，并不会绘制，而是必须调用Stroke（)来绘制

设置线条的样式: 属性
lineWidth
strokeStyle

mContext.lineWidth = 10;    //线条宽度
            mContext.strokeStyle = "#005588";//线条样式， 可以使用css样式， 一般使用字符串样式

使用mContext.fill() 是填充多边形的内部
如下面的三角形

mContext.fillStyle = "green";
mContext.fill();

注意每个边形的结束与开始调用两个方法

**
mContext.beginPath();
mContext.closePath();
**

            mContext.beginPath();
            mContext.moveTo(200, 200);//起点
            mContext.lineTo(400, 400);//终点
            mContext.lineTo(200, 400);
            mContext.lineTo(200, 200);
            mContext.closePath();

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <p>Canvas 画布</p>
    <canvas id="canvas" width="1024" height="768"
        style="border:1px solid #aaa; display:block; margin: 50px auto">
    </canvas>
    <!-- 
        在js中获取

     -->


    <script type="text/javascript">
        window.onload = function() {
            var mCanvas = document.getElementById("canvas");
            var mContext = canvas.getContext("2d");
            if(mContext == null){
                document.write("当前浏览器无法使用canvas");
            } 
            //使用context绘制
            //起点与终点状态
            mContext.beginPath();
            mContext.moveTo(200, 200);//起点
            mContext.lineTo(500, 500);//终点
            mContext.lineTo(200, 500);
            mContext.lineTo(200, 200);
            mContext.closePath();
            mContext.fillStyle = "green";
            mContext.fill();

            mContext.lineWidth = 10;    //线条宽度
            mContext.strokeStyle = "#005588";//线条样式， 可以使用css样式， 一般使用字符串样式
            //真正调用绘制
            mContext.stroke();

            mContext.beginPath();
            mContext.moveTo(400, 400);
            mContext.lineTo(400, 500);
            mContext.closePath();
            mContext.strokeStyle = "red";
            mContext.stroke();

        };


    </script>
</body>
</html>