Rumah >hujung hadapan web >Tutorial H5 >HTML5 canvas画布详解（六）
HTML5 canvas画布详解（六）
- 黄舟asal
- 2017-03-17 15:54:501395semak 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
Artikel sebelumnya：HTML5 canvas画布详解（五）Artikel seterusnya：HTML5多媒体audio和video详细介绍（一）