[canvas]火柴人

• 先看代码

  <canvas id="test2" width="500" height="300"></canvas>

 <script type="text/javascript">
        function draw2() {
            var c2 = document.getElementById('test2')
            var ctx = c2.getContext('2d')

            //头
            ctx.strokeStyle = "red";
            ctx.beginPath();
            ctx.arc(250, 50, 50, 0, 2 * Math.PI);
            ctx.stroke(); //绘制已经定义的路径

            //身体
            ctx.strokeStyle = "red";
            ctx.beginPath();
            ctx.moveTo(250, 100); //起点
            ctx.lineTo(250, 250); //终点
            ctx.stroke();

            //手
            ctx.beginPath();
            ctx.moveTo(250, 120); //起点
            ctx.lineTo(300, 200); //终点
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(250, 120); //起点
            ctx.lineTo(200, 200); //终点
            ctx.stroke();

            //脚
            ctx.beginPath();
            ctx.moveTo(250, 250); //起点
            ctx.lineTo(300, 350); //终点
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(250, 250); //起点
            ctx.lineTo(200, 350); //终点
            ctx.stroke();
            }
            draw2();
    </script>
        }

效果图

---

主要是为了练习
就没有将那些重复的代码进行重构

用的是cancas 标签
声明了一个画布
画布的坐标位置位于第四象限,当然都是正数
就是x、y的起点都是从左上角开始的

---

• 起手
  先找到画布
  目前仅支持2d
  等3d出来的时候再说

var c2 = document.getElementById('test2')
var ctx = c2.getContext('2d')

手册

用到的属性都可以在这里找到