38.canvas

css

*{
     margin: 0;
     padding: 0;
     margin-top: 10vh;
}
body{
     text-align: center;
}
canvas{
     margin: 0 auto;
     border: 1px solid #CCCCCC;
     background: #FFA500;

}

js

<script type="text/javascript">
            window.addEventListener('load',function(){
                var canvas = document.createElement('canvas')
                document.body.appendChild(canvas)
                canvas.id = 'myCanvas'
                canvas.width = 600;
                canvas.height= 600;
                var myCanvas = document.getElementById('myCanvas')
                
                //检测浏览器是否支持canvas属性
                if(!myCanvas||!myCanvas.getContext){
                    return
                }
                var ctx = myCanvas.getContext('2d')
            
                drawTJ()
                drawRad()
                drawLine()
                function drawArc(){
                    
                    ctx.lineWidth = 2
                    ctx.fillStyle = '#008000'
                    var arc = {
                        x:myCanvas.width/2,
                        y:myCanvas.height/2,
                        r:10
                    }
                    ctx.save()
                    for (var o=0;o<10;o++) {
                        ctx.strokeStyle = '#FF3366'
                        ctx.beginPath()
                        ctx.arc(arc.x,arc.y,arc.r*o,getRad(-45),getRad(45))
                        
                        ctx.stroke()
                        
                        ctx.beginPath()
                        ctx.strokeStyle = 'blue'
                        ctx.arc(arc.x,arc.y,arc.r*o,getRad(-135),getRad(135),true)
                        
                        ctx.stroke()
                        
                        ctx.restore()
                    }
                    
                    
                }
                function drawTJ(){
                    ctx.lineWidth = 2
                    ctx.fillStyle = 'white'
                    var arc = {
                        x:myCanvas.width/2,
                        y:130,
                        r:100
                    }
                    //画白大圆
                    ctx.save()
                    ctx.strokeStyle = '#FF3366'
                    ctx.beginPath()
                    ctx.arc(arc.x,arc.y,arc.r,getRad(-90),getRad(90))
                    
                    ctx.fill()
                    //画黑大圆
                    ctx.fillStyle = 'black'
                    ctx.beginPath()
                    ctx.strokeStyle = 'blue'
                    ctx.arc(arc.x,arc.y,arc.r,getRad(-90),getRad(90),true)
                    
                    
                    ctx.fill()
                    
                    //画上面白半圆
                    ctx.fillStyle = 'white'
                    ctx.beginPath()
                    ctx.strokeStyle = 'blue'
                    ctx.arc(arc.x,arc.y-(arc.r/2),arc.r/2,getRad(-90),getRad(90),true)
                    ctx.fill()
                    
                    
                    //画下面黑半圆
                    ctx.fillStyle = 'black'
                    ctx.beginPath()
                    
                    ctx.arc(arc.x,arc.y+(arc.r/2),arc.r/2,getRad(-90),getRad(90))
                    ctx.fill()
                    
                    
                    //上面黑圆点
                    ctx.fillStyle = 'black'
                    ctx.beginPath()
                    
                    ctx.arc(arc.x,arc.y-(arc.r/2),13,getRad(0),getRad(360))
                    ctx.fill()
                    //下面黑圆点
                    
                    ctx.fillStyle = 'white'
                    ctx.beginPath()
                    
                    ctx.arc(arc.x,arc.y+(arc.r/2),13,getRad(0),getRad(360))
                    ctx.fill()
                    ctx.restore()
                }
                function drawRad(){
                    ctx.fillStyle = '#008000'
                    ctx.strokeStyle = '#D94A6A'
                    ctx.lineWidth = 1
                    var arc = {
                        x:myCanvas.width/2,
                        y:390,
                        r:100
                    }
                    ctx.beginPath()
                    ctx.moveTo(arc.x,arc.y)
                    ctx.arc(arc.x,arc.y,arc.r,getRad(-45),getRad(-135),true)
                    ctx.closePath();
                    ctx.fill()
                    
//                    ctx.fillStyle = '#60CB1B'
//                    ctx.beginPath()
//                    ctx.moveTo(arc.x,arc.y)
//                    ctx.arc(arc.x,arc.y,arc.r,getRad(-45),getRad(45))
//                    ctx.closePath();
//                    ctx.fill()
//                    
                    ctx.fillStyle = '#D94A6A'
                    ctx.beginPath()
                    ctx.moveTo(arc.x,arc.y)
                    ctx.arc(arc.x,arc.y,arc.r,getRad(45),getRad(135))
                    ctx.closePath();
                    ctx.stroke()
                    
//                    ctx.fillStyle = '#ADD8E6'
//                    ctx.beginPath()
//                    ctx.moveTo(arc.x,arc.y)
//                    ctx.arc(arc.x,arc.y,arc.r,getRad(135),getRad(-135))
//                    ctx.closePath();
//                    ctx.fill()
                    
                }
                function drawLine(){
                    ctx.setLineDash([5])
                    ctx.fillStyle = '#008000'
                    ctx.strokeStyle = 'blueviolet'
                    ctx.lineWidth = 1
                    var arc = {
                        x:myCanvas.width/2,
                        y:390,
                        r:100
                    }
                    ctx.beginPath()
                    ctx.moveTo(arc.x+0.5,10)
                    ctx.lineTo(arc.x+0.5,myCanvas.height-10)
                    
                    
                    ctx.stroke()
                    ctx.closePath()
                    
                    ctx.beginPath()
                    ctx.moveTo(arc.x+0.5,10)
                    ctx.lineTo(arc.x+0.5,myCanvas.height-10)
                    
                    
                    ctx.stroke()
                    ctx.closePath()
                    
                    ctx.beginPath()
                    ctx.moveTo(10,myCanvas.height/2+0.5)
                    ctx.lineTo(myCanvas.width-10,myCanvas.height/2+0.5)
                    
                    
                    ctx.stroke()
                    ctx.closePath()
                    
                }
                function getRad(deg){
                    return (Math.PI*deg)/180
                }
                function getDeg(rad){
                    return (180*rad)/Math.PI
                }
            },false)
            
        </script>