[canvas]火柴人

叁歲伎倆 2021-09-16 11:50 463阅读 0赞

*  先看代码

<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>
            }

效果图  
![在这里插入图片描述][70]

--------------------

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

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

--------------------

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

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

[手册][Link 1]

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

[70]: /images/20210813/6d851c2ecbf74682bfaf1c9c5080fb30.png
[Link 1]: http://www.w3school.com.cn/tags/html_ref_canvas.asp