38.canvas

Posted 2020-10-04 添砖加码

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>