使用JS的画布制作一个瞄准镜

 <canvas width="600" height="500" id="myCanvas"></canvas>
    <script type="text/javascript">
        //获取Canvas对象(画布)
        var canvas = document.getElementById("myCanvas");
        //获取对应的CanvasRenderingContext2D对象(画笔)
        var ctx = canvas.getContext("2d");
        //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
        if (ctx) {
            //开始一个新的绘制路径
            ctx.beginPath();
            //设置弧线的颜色为渐变色
            var gradient = ctx.createLinearGradient(0, 0, 170, 0);
            gradient.addColorStop("0", "#986f0f");
            gradient.addColorStop("0.5", "yellow");
            gradient.addColorStop("1.0", "orange");

            ctx.strokeStyle = gradient;
            ctx.lineWidth=5;
            var circle = {
                x: 100,    //圆心的x轴坐标值
                y: 100,    //圆心的y轴坐标值
                r: 50      //圆的半径
            };
            //沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
            ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);
            //按照指定的路径绘制弧线
            ctx.stroke();
            //横线
            ctx.moveTo(23,100);
            ctx.lineTo(90,100);
            ctx.stroke();
            ctx.moveTo(106, 100);
            ctx.lineTo(180, 100);
            ctx.stroke();
            //竖线
            ctx.moveTo(98,23);
            ctx.lineTo(99,88);
            ctx.stroke();
            ctx.moveTo(98, 110);
            ctx.lineTo(99, 175);
            ctx.stroke();
        }
    </script>