找回密码
当前位置：前端开发者 > HTML > 正文

canvas简单的画个图。

2018-12-16 分类：HTML 阅读(717) 评论(0)

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>
赞(0)
前端开发者 » canvas简单的画个图。
64K
标签：前端开发者网站前端开发

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论