欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html5 Canvas畫圖教程(8)—canvas里畫曲線之bezierCurveTo方法

  發(fā)布時間:2013-01-09 14:41:58   作者:佚名   我要評論
arc,arcTo以及quadraticCurveTo.他們都有一個共同點(diǎn),就是他們畫的曲線都只能偏向一邊,今天講的bezierCurveTo與他們最大的不同點(diǎn)就是有兩個控制點(diǎn),即可以畫出S形的曲線了,感興趣的朋友可以了解下哦
前面的文章我已經(jīng)講了3種在canvas中畫曲線的方法:arc,arcTo以及quadraticCurveTo.他們都有一個共同點(diǎn),就是他們畫的曲線都只能偏向一邊,今天講的bezierCurveTo與他們最大的不同點(diǎn)就是有兩個控制點(diǎn),即可以畫出S形的曲線了。

bezierCurveTo,也就是所謂的貝賽爾曲線了,如果你學(xué)過某些畫圖工具,就能馬上理解。
bezierCurveTo的語法如下
ctx.bezierCurveTo(x1,y1,x2,y2,x,y);他的參數(shù)我照例解釋一下,其中的(x1,y1)即控制點(diǎn)1的坐標(biāo),(x2,y2)是控制點(diǎn)2的坐標(biāo),(x,y)是他的終點(diǎn)坐標(biāo)。和quadraticCurveTo一樣,他的起點(diǎn)坐標(biāo)也是由moveTo預(yù)先設(shè)置好的。

所以,bezierCurveTo畫出一條曲線需要4個點(diǎn):起點(diǎn),終點(diǎn),控制點(diǎn)1,控制點(diǎn)2.為了后續(xù)講解,這里我假定控制點(diǎn)1對應(yīng)起點(diǎn),控制點(diǎn)2對應(yīng)終點(diǎn)
這里又要提到canvas畫圖的老問題了,就是代碼畫圖全部靠猜,畫到哪里你要刷新下才能明了。

我還是延續(xù)前面的優(yōu)良傳統(tǒng),畫一些輔助線來幫助大家理解:

復(fù)制代碼
代碼如下:

var x1=450, //控制點(diǎn)1的x坐標(biāo)
y1 = 300, //控制點(diǎn)1的y
x2 = 450, //控制點(diǎn)2的x
y2 = 500,//控制點(diǎn)2的y
x = 300, //終點(diǎn)x
y = 500;//終點(diǎn)y
ctx.moveTo(300,300);//起點(diǎn)
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "rgba(0,0,0,1)"
ctx.moveTo(300,300);
ctx.bezierCurveTo(x1,y1,x2,y2,x,y);
ctx.stroke();
//開始畫輔助線
ctx.beginPath();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.lineWidth = 1;
// 連接起點(diǎn)和控制點(diǎn)1
ctx.moveTo(300,300);
ctx.lineTo(x1,y1);
// 連接終點(diǎn)和控制點(diǎn)2
ctx.moveTo(x2,y2);
ctx.lineTo(x,y);
// 連接起點(diǎn)與終點(diǎn)(基線)
ctx.moveTo(300,300);
ctx.lineTo(x,y);
ctx.stroke();


這里先畫了一個類似quadraticCurveTo的曲線,只偏向一邊。這條線顯得比較“圓潤”,是因?yàn)榭刂泣c(diǎn)1與2的x坐標(biāo)是相同的。
現(xiàn)在再畫一個S形的曲線,證明bezierCurveTo是與眾不同的:

復(fù)制代碼
代碼如下:

var x1 = 150;
...


其實(shí)只要把控制點(diǎn)1的坐標(biāo)變一下就行了。如果控制點(diǎn)1與控制點(diǎn)2的坐標(biāo)分別處在基線的兩邊,則是畫出S形的曲線;如果都在基線的某一邊,則是類似于quadraticCurveTo的效果。
這個例子的情形比較簡單,基線條(起點(diǎn)至終點(diǎn))是豎直的,但實(shí)際應(yīng)用中大部分時候我們的基線都是斜著的,那情況就復(fù)雜多了。不過大家自己試吧

每個畫圖的方法看起來功能都比較單一,但是,強(qiáng)大的方法是各個單一的方法組合出來的。后續(xù)的文章我試著講解一些常規(guī)圖形的畫法,如圓角矩形,橢圓,他們就需要以前這些單一的方法結(jié)合起來。

相關(guān)文章

  • HTML5中的Microdata與歷史記錄管理詳解

    Microdata作為HTML5新增的一個特性,它允許開發(fā)者在HTML文檔中添加更多的語義信息,以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容,本文將探討HTML5中Microdata的使用方法以及
    2025-04-21
  • HTML5表格語法格式詳解

    在HTML語法中,表格主要通過< table >、< tr >和< td >3個標(biāo)簽構(gòu)成,本文通過實(shí)例代碼講解HTML5表格語法格式,感興趣的朋友一起看看吧
    2025-04-21
  • html5的響應(yīng)式布局的方法示例詳解

    這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進(jìn)行響應(yīng)式布局的方法,簡要介紹了CSS Grid布局的基礎(chǔ)知識和如何實(shí)現(xiàn)自動換行的網(wǎng)格布局,感興趣的朋友一起看看吧
    2025-04-21
  • 基于Canvas的Html5多時區(qū)動態(tài)時鐘實(shí)戰(zhàn)代碼

    本文介紹了如何使用Canvas在HTML5上實(shí)現(xiàn)一個多時區(qū)動態(tài)時鐘的web展示,通過Canvas的API,可以繪制出6個不同城市的時鐘,并且這些時鐘可以動態(tài)轉(zhuǎn)動,每個時鐘上都會標(biāo)注出對應(yīng)的
    2025-03-11
  • HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼

    HTML5的自定義數(shù)據(jù)屬性(data-*)提供了一種標(biāo)準(zhǔn)化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事
    2025-03-11
  • HTML5中下拉框<select>標(biāo)簽的屬性和樣式詳解

    在HTML5中,下拉框(<select>標(biāo)簽)作為表單的重要組成部分,為用戶提供了一個從預(yù)定義選項(xiàng)中選擇值的方式,本文將深入探討<select>標(biāo)簽的屬性、樣式,并重點(diǎn)介
    2025-02-27
  • HTML5 Input 日期選擇器詳解

    本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時間、日期+時間、本地日期時間等不同類型的日期選擇器,感興趣的朋友一起看
    2025-02-17
  • HTML5超鏈接和圖片基礎(chǔ)用法詳解

    本文介紹了HTML5中的超鏈接、相對路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個文檔或頁面內(nèi)部書簽的鏈接,相對路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁面,圖片標(biāo)簽用于引入外部圖
    2025-02-17
  • HTML5超鏈接的創(chuàng)建方法

    本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點(diǎn)鏈接的使用,還討論了超鏈接的四種不同狀態(tài)(link、visited、hover、active)的CSS樣
    2025-02-17
  • HTML5使用details標(biāo)簽:展開/收縮信息

    最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標(biāo)簽的妙用,這個不用js即可實(shí)現(xiàn)展開/收縮信息,很方便用來讓用戶先才答案,然后下面點(diǎn)擊再給出答案的效果,這里就為大家簡單介紹一下,
    2024-11-03

最新評論