HTML5 4__Canvas API: Drawing curves and transformations-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 4__Canvas API: Drawing curves and transformations

黄舟

Feb 18, 2017 pm 02:20 PM

One of the starting points for HTML5 development is Canvas, through which graphics, charts, images and animations can be dynamically generated and displayed.

Before the emergence of Canvas, developers only needed to use the drawing API in the browser. You can use Adobe's Flash and SVG (Scalable Vector Graphics) plug-ins, or VML (Vector Markup Language) only supported by IE, as well as some JS skills.

Canvas is essentially a bitmap canvas. The graphics drawn on it are not scalable and cannot be scaled like SVG images. In addition, objects drawn with Canvas do not belong to the pageDOM structure or any namespace, which is considered a flaw, SVG images can scale smoothly at different resolutions and support click detection. Although Canvas has obvious shortcomings, the Canvas API has Two advantages:

1. There is no need to store each primitive in the drawn image as an object, and the execution performance is very good .

2. It is relatively simple to implement the Canvas API based on the existing excellent two-dimensional drawing APIs in other programming languages.

1. First introduce canvas to draw curvesLook at the code

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8" />
    <title>绘制曲线</title>
    <script language="javascript">
        function drawTrails() {
            var canvas = document.getElementById(&#39;trails&#39;);
            var context = canvas.getContext(&#39;2d&#39;);
            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 = &#39;#663300&#39;;
            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>

Copy after login

Run the effect in Chrome

Browser

## 2. Transformation

One way to draw images on canvas is to use transformation. In fact, transformation is the best way to implement complex canvas operations.

You can understand transformation like this: think of it as an instruction issued by the developer A modified positive layer between the canvas display result and

The following example shows how to use the simplest transformation method---------translate()

Look at the code

<!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(&#39;diagonal&#39;);
            var context = canvas.getContext(&#39;2d&#39;);

            // 保存当前绘图状态
            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>

Copy after login

Running effect

## The above is HTML5 4__Canvas API: Drawing Curves , transformed content, please pay attention to the PHP Chinese website (www.php.cn) for more related content!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn