HTML5 캔버스에 대한 자세한 설명(6)-H5 튜토리얼-php.cn

HTML5 캔버스에 대한 자세한 설명(6)

黄舟

풀어 주다： 2017-03-17 15:54:50

원래의

1362명이 탐색했습니다.

베지어 곡선

다음은 캔버스에서 베지어 곡선을 그리는 코드입니다.

<!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>

로그인 후 복사

효과는 다음과 같습니다.
HTML5 캔버스에 대한 자세한 설명(6)