Rumah  >  Artikel  >  hujung hadapan web  >  HTML5 canvas画布详解(六)

HTML5 canvas画布详解(六)

黄舟
黄舟asal
2017-03-17 15:54:501363semak imbas

贝塞尔曲线

下面是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>

效果如下:
这里写图片描述

Atas ialah kandungan terperinci HTML5 canvas画布详解(六). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn