HTML5之4__CanvasAPI:绘制曲线、变换

HTML5 开发起点之一就是 Canvas, 通过它可以动态生成和展示图形、图表、图像以及动画.

在Canvas 出现之前，开发人员若要在浏览器中使用绘图API, 只能使用 Adobe 的Flash和 SVG(可伸缩矢量图形) 插件，或者只有IE才支持的VML(矢量标记语言)，以及一些JS技巧。

Canvas 和 SVG 对比

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8" />
    <title>绘制曲线</title>
    <script language="javascript">
        function drawTrails() {
            var canvas = document.getElementById('trails');
            var context = canvas.getContext('2d');
            context.save();
            context.translate(-10, 350);
            context.beginPath();
            //第一条曲线向右上方弯曲
            context.moveTo(0,0);
            context.quadraticCurveTo(170, -50, 260, -190);

            // 第二条曲线向右下方弯曲
            context.quadraticCurveTo(310, -250, 410, -250);

            //使用棕色的粗线条来绘制路径
            context.strokeStyle = '#663300';
            context.lineWidth = 20;
            context.stroke();
            //恢复之前的canvas 状态
            context.restore();
        }
        window.addEventListener("load", drawTrails, true);
    </script>
</head>
<body>
    <canvas height="400" width="400" id="trails" style="border: 1px solid;"/>
</body>
</html>

<!DOCTYPE html>
<html>
  <meta charset="utf-8" />
  <title>变换对角线</title>

  <canvas id="diagonal" style="border: 1px solid;"  width="200" height="200"> </canvas>
  <script>
        function drawDiagonal() {
            var canvas = document.getElementById('diagonal');
            var context = canvas.getContext('2d');

            // 保存当前绘图状态
            context.save();

            //向右下方移动绘图上下文
            context.translate(70, 140);

            //以原点为起点，绘制与前面相同的线段
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(70, -70);
            context.stroke();

            // 恢复原有的绘图状态
            context.restore();
        }

        window.addEventListener("load", drawDiagonal, true);
  </script>
</html>

以上就是HTML5之4__Canvas API: 绘制曲线、变换的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did65661

更新时间：2022-10-13 阅读：66次