canvas

        canvas{
            border:1px solid red;
        }
    </style>

```<canvas width="500px" height="500px" id="mycanvas">

    </canvas>
    <script>
        window.onload=function(){
            var mycanvas=document.getElementById("mycanvas");
            // 渲染上下文，让canvas采用2d绘图
            var cxt=mycanvas.getContext("2d");
            // 三角形绘制
                // 路径的开始
                cxt.beginPath();
                // 起始位置
                cxt.moveTo(100,400);
                // 结束位置
                cxt.lineTo(400,400);
                // 描线的颜色
                cxt.strokeStyle="yellow";
                // 描线的宽度
                cxt.lineWidth=10;
                // 路径的结束
                cxt.closePath();
                // 描边绘制
                cxt.stroke();

                cxt.beginPath();
                cxt.moveTo(400,400);
                cxt.lineTo(250,140);
                cxt.strokeStyle="green";
                cxt.closePath();
                cxt.stroke();

                cxt.beginPath();
                cxt.moveTo(250,140);
                cxt.lineTo(100,400);
                cxt.strokeStyle="red";
                cxt.closePath();
                cxt.stroke();

            //圆形绘制
                cxt.beginPath();
                cxt.arc(50,50,50,0,2*Math.PI,true);
                // 前两个参数表示圆心，第三个参数表示半径，第四个参数是起始角度，第五个参数是结束角度，第六个参数表示是否顺时针画圆，用ture和false
                cxt.closePath();
                cxt.stroke();

            //矩形绘制 
            cxt.beginPath();
            cxt.strokeRect(100,100,40,60);
            // 前面两个参数表示七点坐标的位置，第三个参数表示宽度，第四个参数表示高度
            cxt.closePath();
            // 矩形不用绘制，自带绘制属性
        }
    </script>