masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > 用Canvas绘制贝赛尔曲线

用Canvas绘制贝赛尔曲线

WBOY
Lepaskan： 2016-05-17 09:09:05
asal
1678 orang telah melayarinya
要创建一个HTML5的画布——贝塞尔曲线，我们可以使用bezierCurveTo()方法。Bezier曲线定义点有两个控制点和一个结束点。与二次曲线相比，Bezier曲线定义有两个控制点，而不是一个，使您能够创建更复杂的曲线。
具体代码如下：

bezier-1.jpg


  1. context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
复制代码

案例的JavaScript代码：

  1. window.onload = function(){
  2.     var canvas = document.getElementById("myCanvas");
  3.     var context = canvas.getContext("2d");
  4.     context.moveTo(188, 130);
  5.     var controlX1 = 140;
  6.     var controlY1 = 10;
  7.     var controlX2 = 388;
  8.     var controlY2 = 10;
  9.     var endX = 388;
  10.     var endY = 170;
  11.     context.bezierCurveTo(controlX1, controlY1, controlX2
  12.         controlY2, endX, endY);
  13.     context.lineWidth = 10;
  14.     context.strokeStyle = "black"; // line color
  15.     context.stroke();
  16. };
复制代码


关于为什么要使用这些代码，我们用一张图片来解释一下：

bezier-2.jpg



贝塞尔曲线的定义是由当前的上下文和两个控制点以及结束点控制的。曲线的第一部分是切向的假想线，是由上下文点和第一个控制点定义。第二部分的曲线相切的假想线，是第二个控制点和结束点定义。



转自我爱猫猫技术博客

Label berkaitan：
html5
sumber：php.cn
Artikel sebelumnya：html5游戏开发-零基础开发RPG游戏-开源讲座(一) Artikel seterusnya：html5 canvas (三)
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
Penapis ungkapan biasa untuk kotak carian dan kotak semak tindanan MERN Saya cuba memahami cara tindanan MERN berfungsi bersama-sama dengan belajar dengan melakuk...
daripada 2024-04-06 14:53:12
0
1
425
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Isu pemasangan Prestashop: Tidak dapat memasang modul tersuai Saya baru dalam pembangunan modul Prestashop. Saya cuba membina modul prestashop pertama A...
daripada 2024-04-03 19:24:44
0
1
402
Tutorial PHP: Bagaimana untuk memuat naik teks dan imej ke Linkedin menggunakan PHP? Saya cuba memuat naik teks, imej dan pautan menggunakan LinkedinsRestAPI (https://learn.mi...
daripada 2024-04-03 18:42:29
0
1
420
Tidak dapat menerima maklumat daripada pangkalan data mySQL saya walaupun telah melihat tutorial melakukan perkara yang sama Jadi saya cuba membuat program yang membaca dan menulis ke pangkalan data MySQL, yang memb...
daripada 2024-04-03 14:46:04
0
1
298
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan