【canvas】直线 / 三角形 / 矩形 / 曲线 / 控制点 / 变换

最新推荐文章于 2022-04-22 10:20:28 发布

絮飘

最新推荐文章于 2022-04-22 10:20:28 发布

阅读量955

点赞数

分类专栏： HTML5

HTML5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {margin: 0;padding: 0;}
        canvas {border: 2px dotted #ddd}
    </style>
</head>
<body>
    <canvas id=drawingCanvas1 width=500 height=300></canvas>
    <canvas id=drawingCanvas2 width=500 height=300></canvas>
    <canvas id=drawingCanvas3 width=500 height=300></canvas>
    <canvas id=drawingCanvas4 width=500 height=300></canvas>
    <canvas id=drawingCanvas5 width=500 height=300></canvas>
    <canvas id=drawingCanvas6 width=500 height=300></canvas>
    <script>
        // 直线
        var canvas = document.getElementById('drawingCanvas1')
        var context = canvas.getContext('2d')
        // 设置
        context.lineWidth = 20 // 线条宽度
        context.strokeStyle = 'rgba(205, 40, 40, 0.5)' // 线条颜色
        context.lineCap = 'round' // 线头形状
        context.moveTo(10, 10) // 起点
        context.lineTo(400, 40) // 终点
        // 绘制
        context.stroke()

        /**
         * 重新开始一个新线段的绘制
         * 如果没有这一步，那么每次调用stroke()，都会把画布上原有的线段再重新绘制一遍
         */
        context.beginPath()
        // 设置
        context.lineCap = 'square'
        context.moveTo(10, 10)
        context.lineTo(400, 90)
        // 绘制
        context.stroke()

        // 三角形
        var canvas = document.getElementById('drawingCanvas2')
        var context = canvas.getContext('2d')

        context.moveTo(255, 50)
        context.lineTo(50, 250)
        context.lineTo(450, 250)
        context.closePath()
        
        context.fillStyle = 'blue'
        context.fill()

        context.lineWidth = 5
        context.strokeStyle = 'red'
        context.stroke()
// 曲线
        var canvas = document.getElementById('drawingCanvas4')
        var context = canvas.getContext('2d')

        var centerX = 250
        var centerY = 150
        var radius = 100
        var startingAngle = 0 * Math.PI
        var endingAngle = 0.5 * Math.PI

        context.arc(centerX, centerY, radius, startingAngle, endingAngle)
        context.closePath()
        context.stroke()

        context.beginPath()
        var endingAngle = 2 * Math.PI
        context.arc(centerX, centerY, radius, startingAngle, endingAngle)
        context.stroke()

        // 控制点
        var canvas = document.getElementById('drawingCanvas5')
        var context = canvas.getContext('2d')

        context.moveTo(100, 100)

        var control1_x = 60
        var control1_y = 10
        var control2_x = 40
        var control2_y = 90
        var endPointX = 0
        var endPointY = 0

        context.bezierCurveTo(control1_x, control1_y, control2_x, control2_y,
            endPointX, endPointY)
        context.stroke()

        // 变换
        var canvas = document.getElementById('drawingCanvas6')
        var context = canvas.getContext('2d')

        context.translate(100, 100)

        var copies = 10
        for (var i = 1; i < copies; i++) {
            context.rotate(2 * Math.PI * 1 / (copies -1))
            context.rect(0, 0, 60, 60)
        }
        context.stroke()
    </script>
</body>
</html>

絮飘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【canvas】直线 / 三角形 / 矩形 / 曲线 / 控制点 / 变换

DOCTYPE html>html lang="zh-CN">head> meta charset="utf-8"> title>title> style type="text/css"> * {margin: 0;padding: 0;} canvas {border: 2px dotted #ddd} style>hea
复制链接

扫一扫