canvas简单的画个图。

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>pika</title>
        <style>
            * {
                padding: 0px;
                margin: 0px;
            }
            canvas {
                background: #fce501;
            }
        </style>
    </head>
    <body>
        <canvas id=”myCanvas”>Your browser doesn’t support the canvas!</canvas>
        <script type=”text/javascript”>
            var canvas = document.getElementById(‘myCanvas’)
            canvas.width = 500
            canvas.height = 400
            var ctx = canvas.getContext(‘2d’)
            ctx.beginPath()
            ctx.fillStyle = ‘#000000’
            ctx.arc(175, 160, 27, 0, 2 * Math.PI)
            ctx.closePath()
            ctx.fill()
            ctx.stroke()
            ctx.beginPath()
            ctx.fillStyle = ‘#ffffff’
            ctx.arc(165, 149, 8, 0, 2 * Math.PI)
            ctx.closePath()
            ctx.fill()
            ctx.stroke()
            ctx.beginPath()
            ctx.fillStyle = ‘#000000’
            ctx.arc(325, 160, 27, 0, 2 * Math.PI)
            ctx.closePath()
            ctx.fill()
            ctx.stroke()
            ctx.beginPath()
            ctx.fillStyle = ‘#ffffff’
            ctx.arc(315, 149, 8, 0, 2 * Math.PI)
            ctx.closePath()
            ctx.fill()
            ctx.stroke()
            ctx.beginPath()
            ctx.fillStyle = ‘#ed6b49’
            ctx.arc(135, 215, 23, 0, 2 * Math.PI)
            ctx.closePath()
            ctx.fill()
            // ctx.stroke();
            ctx.beginPath()
            ctx.fillStyle = ‘#ed6b49’
            ctx.arc(365, 215, 23, 0, 2 * Math.PI)
            ctx.closePath()
            ctx.fill()
            ctx.beginPath()
            ctx.fillStyle = ‘#000000’
            ctx.arc(
                251,
                221,
                10,
                (180 * Math.PI) / 180,
                (360 * Math.PI) / 180,
                true,
            )
            ctx.closePath()
            ctx.fill()
            ctx.stroke()
            ctx.beginPath()
            ctx.strokeStyle = ‘#000000’
            ctx.lineWidth = 6
            ctx.lineCap = ’round’
            ctx.moveTo(182, 248)
            ctx.quadraticCurveTo(198, 275, 251, 252)
            ctx.stroke()
            ctx.beginPath()
            ctx.strokeStyle = ‘#000000’
            ctx.lineWidth = 6
            ctx.lineCap = ’round’
            ctx.moveTo(310, 248)
            ctx.quadraticCurveTo(297, 275, 251, 252)
            ctx.stroke()
        </script>
    </body>
</html>
» 本文来自:前端开发者 » 《canvas简单的画个图。》
» 本文链接地址:https://www.rokub.com/8849.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!