Canvas(2)曲线图形圆角矩形二次贝塞尔曲线-气泡三次贝塞尔曲线-爱心

第二周

曲线图形

<html>
    <head>
        <title>曲线图形</title>
        <meta charset="utf-8"/>
        <script>
            function ?(id){
                return document.getElementById(id)
            }
            window.onload = function(){
                var cnv = ?("canvas")
                var cxt = cnv.getContext("2d")
                
                cxt.moveTo(20,20)
                cxt.lineTo(70,20)
                cxt.arcTo(120,20,120,70,50)
                cxt.lineTo(120,120)
                cxt.stroke()

            }
        </script>
    </head>
    <body>
        <canvas id="canvas" width="200" height="150" style="border:1px dashed #ddd"></canvas>
    </body>
</html>

圆角矩形

<html>
    <head>
        <title>圆角矩形</title>
        <meta charset="utf-8"/>
        <script>
            function ?(id){
                return document.getElementById(id)
            }
            window.onload = function(){
                var cnv = ?("canvas")
                var cxt = cnv.getContext("2d")
                creatRoundRect(cxt,100,100,20,20,20)
                cxt.fillStyle = "HotPink"
                cxt.fill();
            }

            function creatRoundRect(cxt,width,height,r,offsetX,offsetY){
                cxt.beginPath()
                cxt.moveTo(offsetX + r,offsetY)
                cxt.lineTo(offsetX + width - r,offsetY)
                cxt.arcTo(offsetX + width , offsetY ,offsetY + width , offsetY +r ,r)
                cxt.lineTo(offsetX + width,offsetY + height -r)
                cxt.arcTo(offsetX + width , offsetY + height  ,offsetX + width -r, offsetY + height  ,r)
                cxt.lineTo(offsetX + r ,offsetY + height)
                cxt.arcTo(offsetX , offsetY + height  ,offsetX , offsetY + height -r,r)
                cxt.lineTo(offsetX ,offsetY + r)
                cxt.arcTo(offsetX , offsetY ,offsetX + r , offsetY,r)
                cxt.closePath()
            }
        </script>
    </head>
    <body>
        <canvas id="canvas" width="200" height="150" style="border:1px dashed #ddd"></canvas>
    </body>
</html>

二次贝塞尔曲线-气泡

<html>
    <head>
        <title>二次贝塞尔曲线-气泡</title>
        <meta charset="utf-8"/>
        <script>
            function ?(id){
                return document.getElementById(id)
            }
            window.onload = function(){
                var cnv = ?("canvas")
                var cxt = cnv.getContext("2d")
                
                cxt.moveTo(75,25)
                cxt.quadraticCurveTo(25,25,25,62)
                cxt.quadraticCurveTo(25,100,50,100)
                cxt.quadraticCurveTo(50,120,30,125)
                cxt.quadraticCurveTo(60,120,65,100)
                cxt.quadraticCurveTo(125,100,125,62)
                cxt.quadraticCurveTo(125,25,75,257)
                cxt.stroke()
            }

            
        </script>
    </head>
    <body>
        <canvas id="canvas" width="200" height="150" style="border:1px dashed #ddd"></canvas>
    </body>
</html>

三次贝塞尔曲线-爱心

<html>
    <head>
        <title>三次贝塞尔曲线-爱心</title>
        <meta charset="utf-8"/>
        <script>
            function ?(id){
                return document.getElementById(id)
            }
            window.onload = function(){
                var cnv = ?("canvas")
                var cxt = cnv.getContext("2d")
                
                cxt.moveTo(75,40)
                cxt.bezierCurveTo(75,37,70,25,50,25)
                cxt.bezierCurveTo(20,25,20,62.5,20,62.5)
                cxt.bezierCurveTo(20,80,40,102,75,120)
                cxt.bezierCurveTo(110,102,130,80,130,62.5)
                cxt.bezierCurveTo(130,62.5,130,25,100,25)
                cxt.bezierCurveTo(85,25,75,37,75,40)
                cxt.stroke()
            }

            
        </script>
    </head>
    <body>
        <canvas id="canvas" width="200" height="150" style="border:1px dashed #ddd"></canvas>
    </body>
</html>