使用HTML5 Canvas API繪制弧線的教程

2020-03-24 19:18:49

字體：大中小

來源：轉載

供稿：網友

繪制標準圓弧在開始之前，我們優化一下我們的作圖環境。靈感來自于上節課的紋理，如果不喜歡這個背景，我在images目錄下還提供了其他的背景圖，供大家選擇。另外把所有的樣式表都寫在了 head 下。JavaScript Code復制內容到剪貼板
style body{background:url( ./images/bg3.jpg )repeat;} #canvas{border:1pxsolid#aaaaaa;display:block;margin:50pxauto;} /style /head body divid= canvas-warp canvasid= canvas 你的瀏覽器居然不支持Canvas？！趕快換一個吧！！ /canvas /div script window.onload=function(){ varcanvas=document.getElementById( canvas ); canvas.width=800; canvas.height=600; varcontext=canvas.getContext( 2d ); context.fillStyle= #FFF ; context.fillRect(0,0,800,600); } /script /body /html
運行結果：
之所以要繪制一個空白的矩形填滿畫布，是因為我們之前說過，canvas是透明的，如果不設置背景色，那么它就會被我設置的 body 紋理所覆蓋，想要使其擁有背景色（白色），只有繪制矩形覆蓋canvas這一個方法。怎么樣，是不是非常的酷？使用arc()繪制圓弧
arc()的使用方法如下：JavaScript Code復制內容到剪貼板
前面三個參數，分別是圓心坐標與圓半徑。startAngle、endAngle使用的是弧度值，不是角度值?；《鹊囊幎ㄊ墙^對的，如下圖。
anticlockwise表示繪制的方法，是順時針還是逆時針繪制。它傳入布爾值，true表示逆時針繪制，false表示順時針繪制，缺省值為false?；《鹊囊幎ㄊ墙^對的，什么意思呢？就是指你要繪制什么樣的圓弧，弧度直接按上面的那個標準填就行了。比如你繪制 0.5pi ~ 1pi 的圓弧，如果順時針畫，就只是左下角那1/4個圓弧；如果逆時針畫，就是與之互補的右上角的3/4圓弧。此處自己嘗試，不再舉例。使用切點繪制圓弧arcTo()介紹:
arcTo()方法接收5個參數，分別是兩個切點的坐標和圓弧半徑。這個方法是依據切線畫弧線，即由兩個切線確定一條弧線。
具體如下。JavaScript Code復制內容到剪貼板
這個函數以給定的半徑繪制一條弧線，圓弧的起點與當前路徑的位置到(x1, y1)點的直線相切，圓弧的終點與(x1, y1)點到(x2, y2)的直線相切。因此其通常配合moveTo()或lineTo()使用。其能力是可以被更為簡單的arc()替代的，其復雜就復雜在繪制方法上使用了切點。使用切點繪制弧線:
下面的案例我把切線也繪制出來了，看的更清楚一些。JavaScript Code復制內容到剪貼板
style body{background:url( ./images/bg3.jpg )repeat;} #canvas{border:1pxsolid#aaaaaa;display:block;margin:50pxauto;} /style /head body divid= canvas-warp canvasid= canvas 你的瀏覽器居然不支持Canvas？！趕快換一個吧?。? /canvas /div script window.onload=function(){ varcanvas=document.getElementById( canvas ); canvas.width=800; canvas.height=600; varcontext=canvas.getContext( 2d ); context.fillStyle= #FFF ; context.fillRect(0,0,800,600); drawArcTo(context,200,200,600,200,600,400,100); }; functiondrawArcTo(cxt,x0,y0,x1,y1,x2,y2,r){ cxt.beginPath(); cxt.moveTo(x0,y0); cxt.arcTo(x1,y1,x2,y2,r); cxt.lineWidth=6; cxt.strokeStyle= red ; cxt.stroke(); cxt.beginPath(); cxt.moveTo(x0,y0); cxt.lineTo(x1,y1); cxt.lineTo(x2,y2); cxt.lineWidth=1; cxt.strokeStyle= #0088AA ; cxt.stroke(); } /script /body /html
運行結果：
這個案例也很好說明了arcTo()的各個關鍵點的作用。為了更清楚的解釋，我再標注一個分析圖。
這里注意一下，arcTo()繪制的起點是(x0, y0)，但(x0, y0)不一定是圓弧的切點。真正的arcTo()函數只傳入(x1, y1)和(x2, y2)。其中(x1, y1)稱為控制點，(x2, y2)是圓弧終點的切點，它不一定在圓弧上。但(x0, y0)一定在圓弧上。
有一點點繞，下面我們改變drawArcTo()函數的參數來試驗一下。
(x2, y2)不一定在弧線上：
JavaScript Code復制內容到剪貼板
drawArcTo(context,200,100,600,100,600,400,400);
drawArcTo(context,400,100,600,100,600,400,400);
挺有意思的，它為了經過(x0, y0)直接將切點和(x0, y0)連接起來形成線段。好執著的弧線
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html編寫edm時有哪些要注意的？

下一篇：HTML的基礎控件有哪些