Detailed explanation of HTML5 canvas (6)-H5 Tutorial-php.cn

Table of Contents

Bezier curve

Home

Web Front-end

H5 Tutorial

Detailed explanation of HTML5 canvas (6)

黄舟

Mar 17, 2017 pm 03:54 PM

Bezier curve

The following is the code for drawing the Bezier curve in canvas:

<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <title>canvas绘图</title>
    <script>
    window.onload = function()
    {
        drawCanvas1();
        drawCanvas2();
    }    function drawCanvas1()
    {
        var canvas=document.getElementById("myCanvas1");        
        var context=canvas.getContext("2d");

        context.beginPath();
        context.moveTo(20,20);
        context.quadraticCurveTo(30,100,200,90);
        context.stroke();        //标注坐标点
        //context.textAlign = "center";
        context.fillStyle = "red";
        context.fillText("开始点(20,20)",20,20);
        context.fillText("控制点(30,100)",30,100);
        context.fillText("结束点(200,90)",200,90);        
        //红色辅助线
        context.strokeStyle = "red";
        context.beginPath();
        context.moveTo(20,20);
        context.lineTo(30,100);
        context.lineTo(200,90);
        context.stroke();
    }    function drawCanvas2()
    {
        var canvas = document.getElementById("myCanvas2");        
        var context = canvas.getContext("2d");

        context.beginPath();
        context.moveTo(20,20);
        context.bezierCurveTo(20,100,200,300,200,20);
        context.stroke();        //标注坐标点
        //context.textAlign = "center";
        context.fillStyle = "red";
        context.fillText("开始点(20,20)",20,20);
        context.fillText("控制点1(20,100)",20,100);
        context.fillText("控制点2(200,300)",200,300);
        context.fillText("结束点(200,20)",200,20);        
        //红色辅助线
        context.strokeStyle = "red";
        context.beginPath();
        context.moveTo(20,20);//起始点
        context.lineTo(20,100);//控制点1       
        context.lineTo(200,300);//控制点2
        context.lineTo(200,20);//结束点
        context.stroke();
    }    </script></head><body>
    <canvas id="myCanvas1" width="400" height="400" style="border:#F00 solid 1px">
        您的浏览器不支持canvas    
        </canvas>
    <canvas id="myCanvas2" width="400" height="400" style="border:#F00 solid 1px">
        您的浏览器不支持canvas    
        </canvas>
    <br />
    </body>
    </html>

Copy after login

The effect is as follows:
Detailed explanation of HTML5 canvas (6)

The above is the detailed content of Detailed explanation of HTML5 canvas (6). For more information, please follow other related articles on the PHP Chinese website!

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