canvas笔记-二次贝塞尔曲线与三次贝塞尔曲线的用法
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-二次贝塞尔曲线与三次贝塞尔曲线的用法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
此博文不研究其算法，只記錄下其用法。
?
首先是二次貝塞爾曲線！
函數是這樣的
quadraticCurveTo(cpx,?cpy,?x,?y);
其中cpx為貝塞爾控制點x；
其中cpy為貝塞爾控制點y；
其中x為結束點x坐標；
其中y為結束點y坐標。
?
這里隱藏了一個開始點，一般用beginPath()和moveTo方法來定義開始點：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.beginPath();context.moveTo(100, 100);context.quadraticCurveTo(100, 300, 400, 400);context.stroke();}</script></body> </html>下面是三次貝塞爾曲線
函數為bezierCurveTo(cp1x,?cp1y,?cp2x,?cp2y,?x,?y)
其中cp1x為第一個貝塞爾控制點x軸坐標；
其中cp1y為第一個貝塞爾控制的y軸坐標；
其中cp2x為第二個貝塞爾控制的x軸坐標；
其中cp2y為第二個貝塞爾控制的y軸坐標；
其中x為結束點坐標；
其中y為結束點坐標；
?
同樣這個函數也需要一個moveTo去增加一個開始點！
?
程序運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.beginPath();context.moveTo(20, 20);context.bezierCurveTo(20, 700, 200, 100, 700, 500);context.stroke();}</script></body> </html>?
?
?
總結
以上是生活随笔為你收集整理的canvas笔记-二次贝塞尔曲线与三次贝塞尔曲线的用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web前端笔记-使用@media（媒体查
- 下一篇： 软考网络工程师笔记-综合知识1