40.canvas drawReact

Posted 2020-10-04 添砖加码

css

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

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\')
                $$drawRect()
                useReact()
                useStokeRect()
                function $$drawRect(){
//                    ctx.setLineDash([25,5,5,5])//线段间隔长度
                    ctx.lineWidth = 2
                    ctx.fillStyle = \'#F08080\'
                    ctx.strokeStyle = \'#34C2E3\'
//                    ctx.lineCap = \'butt\'//线段终起点 \'butt\' \'round\' \'square\'
                    ctx.lineJoin = \'round\'//线段的转折点 \'round\' \'bevel\' \'miter\'

                    ctx.beginPath()
                    ctx.moveTo(30,30)
                    ctx.lineTo(150,30)
                    ctx.lineTo(150,150)
                    ctx.lineTo(30,150)
                    
                    ctx.closePath()
//                    ctx.stroke()//绘制边框图像
                    ctx.fill()//填充
                    
                    ctx.beginPath()
                    ctx.moveTo(160,30)
                    ctx.lineTo(280,30)
                    ctx.lineTo(280,150)
                    ctx.lineTo(160,150)
                    
                    ctx.closePath()
                    ctx.stroke()//绘制边框图像
                    
                }
                function useReact(){
                    ctx.strokeStyle = \'#FF3366\'
                    ctx.lineWidth = 2
                    ctx.fillStyle = \'#008000\'
                    ctx.beginPath()
                    ctx.rect(30,160,120,120)
                    ctx.stroke()
                    
                    ctx.beginPath()
                    ctx.rect(160,160,120,120)
                    ctx.fill()
                }
                function useStokeRect(){
                    ctx.fillStyle = \'#008000\'
                    ctx.fillRect(30,290,120,120)
                    ctx.lineWidth = 2
                    ctx.strokeStyle = \'#33EE66\'
                    ctx.strokeRect(160,290,120,120)
                }
            },false)
            
        </script>