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

来源：互联网发布：centos 7.2 安装samba 编辑：程序博客网时间：2024/05/01 11:31
<!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