PHP前端开发

HTML5 canvas画布详解（六）

百变鹏仔 2个月前 (10-18) #H5教程

文章标签画布

贝塞尔曲线

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

效果如下：

文章推荐

本站为非盈利性网站,不接受任何赞助和广告。

特别声明：本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。 | 举报邮箱：344225443@qq.com

互联网ICP备案：陕ICP备2023000799号 Copyright 2023-2024 sharedbk.com All rights reserved | (c)2008-2024 共享博客