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

Detailed explanation of HTML5 canvas (6)

黄舟

Release： 2017-03-17 15:54:50

Original

1359 people have browsed it

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!