整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          python海龜繪圖turtle(三):繪圖命令

          python海龜繪圖turtle(三):繪圖命令

          龜繪圖(turtle)是python的一個有趣的內置模塊,是python語言的標準庫之一,是入門級的圖形繪制函數庫。

          turtle通過一組函數控制畫筆的行進動作,進而繪制形狀,這些函數命令分別是:畫筆控制方法、方向控制方法和全局控制方法。

          一、畫筆控制方法

          抬筆

          penup()、pu()、up()

          畫筆抬起,移動時不繪制圖形

          落筆

          pendown()、pd()、down()

          畫筆落下,移動時繪制圖形,缺省時也為畫筆落下

          定位

          goto(x,y)、setpos(x,y)、setposition(x,y)

          將畫筆移動到坐標為x,y的位置由當前坐標前往指定坐標,這里使用絕對坐標,但畫筆方向不會改變


          二、方向控制方法

          前進

          forward(s)、

          fd(s)

          海龜前進s指定的距離,方向為海龜的朝向。

          后退

          backward(s)、bk(s)、back(s)

          海龜后退s指定的距離,方向與海龜的朝向相反。不改變海龜的朝向。

          改變

          方向

          setheading

          (angle)、

          seth(angle)

          以絕對角度改變方向

          左轉

          left(angle)、

          lt(angle)

          海龜左轉 angle 個單位。(單位默認為角度,但可通過 degrees() 和 radians() 函數改變設置。)

          右轉

          right(angle)、

          rt(angle)

          海龜右轉 angle 個單位。(單位默認為角度,但可通過 degrees() 和 radians() 函數改變設置。)

          畫圓

          circle(r,angle)

          以畫筆(海龜)左側為圓心,半徑為r像素,畫angle度的圓形。注意:海龜方向同時發生angle度變化

          畫圓

          畫弧

          circle(radius, extent=None, steps=None)

          繪制一個 radius 指定半徑的圓。圓心在海龜左邊 radius 個單位;extent 為一個夾角,用來決定繪制圓的一部分。如未指定 extent則繪制整個圓。如果extent 不是完整圓周,則以當前畫筆位置為一個端點繪制圓弧。如果 radius 為正值則朝逆時針方向繪制圓弧,否則朝順時針方向。最終海龜的朝向會依據 extent 的值而改變。


          三、 全局控制方法

          清空

          clear()

          清空窗口,但是turtle的位置和狀態不會改變

          重置

          reset()

          清空窗口,重置turtle狀態為起始狀態

          撤消

          undo()

          撤消 (或連續撤消) 最近的一個 (或多個) 海龜動作??沙废拇螖涤沙废彌_區的大小決定。

          印章

          stamp()

          在海龜當前位置印制一個海龜形狀。返回該印章的 stamp_id,印章可以通過調用 clearstamp(stamp_id) 來刪除。

          文本

          write(arg,

          move, align="left", font=("fonnt-ame",font-size,"font-type"))

          寫文本,arg為文本內容,moveo 可選參數,用于指定是否移動畫筆到文本的右下角,默認為False (不移動)。

          align:可選參數,用于指定文字的對齊方式,其參數值為left(居左)、center(居中)或者right(居右)中的任意一個,默認為left。

          font:可選參數,用于指定字體、字號和字形,通過一個三元組(字體,字號,字形)指定

          停止

          done()

          暫停程序,停止畫筆繪制, 等待用戶操作,窗口不自動關閉。是海龜繪圖程序中的最后一個語句。

          四、其他的一些特殊方法

          更多函數可以通過官方文檔查看:https://docs.python.org/3/library/turtle.html

          css3之前,并沒有直接的設置元素圓角的屬性,那如何實現設計圖中的圓角設定呢?

          如:表單demo中的文本框圓角。



          一般通過在PS 軟件中截取上左、上右、下左、下右四個邊角的圓角圖片,通過background-position背景圖屬性設定位置,從而實現圓角的設定。

          或是將四個圓角圖片當做四個img標簽,通過position定位屬性找尋設定的位置,如:


          通過圖片設定圓角


          在IE6、7、8還比較盛行的時候,如果要兼容到IE瀏覽器,需要使用CSS hack兼容IE瀏覽器版本,高級瀏覽器可以直接使用border-radius屬性設定圓角,對低版本瀏覽器使用圖片定位的方式實現設計圖呈現。但隨著近幾年瀏覽器版本的不斷更新迭代,我們需要做的就是,如果需要兼容低版本瀏覽器,只需保證呈現正常即可,無需過分的追求展示效果與設計圖的還原度。但實現的思想在web布局中是很重要的。


          近在看自己的頭條權益的時候,看到這個信用分圖片,出于職業的好奇心,研究一下這個半環圖的畫法。

          實現這個半圓圖,有兩種方案。第一種方案,走css路線,首先畫一個整的圓環,通過兩塊擋板的旋轉展現出一部分的環形。第二種方案,通過canvas畫圖實現半環圖。我認為還是第二種方案更好實現。今天我就教大家如何使用canvas實現這個圖。

          首先創建一個html文件。在<body></body>標簽里創建一個canvas標簽,定義一下畫布的大小。

          <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>score</title>
          <style>
          #score{
          background: #333;
          border-radius: 5px;
          }
          </style>
          </head>
          <body>
          <canvas id="score" width="300" height="300" data-score='100'>
          <span>你的瀏覽器不支持canvas元素,換個瀏覽器試試吧</span>
          </canvas>
          </body>
          </html>

          然后開始寫js,在canvas標簽里畫圓弧。

          var c=document.getElementById('score');
          var ctx=c.getContext("2d");
          var value=c.attributes['data-score'].value;
          
          const x0=150; // 圓心坐標
          const y0=155;// 圓心坐標
          const r1=130; // 外圓半徑
          const startAng=145; // 起始角度
          const endAng=35;
          
          // 根據半徑和角度判斷x軸坐標
          function getPointX(r, ao) {
          return x0 + r * Math.cos(ao * Math.PI / 180)
          }
          
          // 根據半徑和角度判斷Y軸坐標
          function getPointY(r, ao) {
          return y0 + r * Math.sin(ao * Math.PI / 180)
          }
          
          // 底層的圓弧 無色
          ctx.beginPath();
          ctx.arc(x0, y0, r1, (Math.PI / 180) * startAng, (Math.PI / 180) * endAng, false);
          ctx.strokeStyle="#666";
          ctx.lineWidth=10;
          ctx.lineCap='round'; // 線的末端設置
          ctx.stroke();

          在瀏覽器打開,出現的效果如下:


          圓環已經初見成效。興奮,激動,哈哈。這個圓弧是底層圓弧,是不會變動的。接下來畫第二層圓弧,可以隨著信用分變動的部分。上js代碼

          // 畫外層的圓弧 有色,可變動
          var blueAng=145+(250/100)*value; // 這里的value是可以根據信用分控制的
          ctx.beginPath();
          ctx.arc(x0, y0, r1, (Math.PI / 180) *startAng, (Math.PI / 180) * blueAng, false);
          var linearGradient=ctx.createLinearGradient(0,0,250,0);
          linearGradient.addColorStop(0,'#F6E259');
          linearGradient.addColorStop(1,'#F4ECB6');
          ctx.strokeStyle=linearGradient;
          ctx.lineWidth=9;
          ctx.lineCap='round'; // 線的末端設置
          ctx.stroke();

          請看效果圖:


          然后就是填充中間的文字,js代碼如下:

          // canvas中間的文
          ctx.font="normal 80px PingFangSC-Medium"; // 字體大小,樣式
          ctx.fillStyle="#E8DA77";; // 顏色
          ctx.textAlign='center'; // 位置
          ctx.textBaseline='middle';
          ctx.moveTo(150, 155); // 文字填充位置
          ctx.fillText(value, 150, 310/2-30);
          ctx.font="normal 14px PingFangSC-Regular"; // 字體大小,樣式
          ctx.fillStyle="#E8DA77"; // 顏色
          ctx.fillText("評估于06-01 16:18:03", 150, 180);

          效果露一下?。?/p>


          說了這么多,附上完整代碼,你可以直接粘貼復制看看效果。

          <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>score</title>
          <style>
          #score{
          background: #333;
          border-radius: 5px;
          }
          </style>
          </head>
          <body>
          <canvas id="score" width="300" height="300" data-score='96'>
          <span>你的瀏覽器不支持canvas元素,換個瀏覽器試試吧</span>
          </canvas>
          </body>
          </html>
          <script>
          var c=document.getElementById('score');
          var ctx=c.getContext("2d");
          var value=c.attributes['data-score'].value;
          
          const x0=150; // 圓心坐標
          const y0=155;// 圓心坐標
          const r1=130; // 外圓半徑
          const startAng=145; // 起始角度
          const endAng=35;
          
          // 根據半徑和角度判斷x軸坐標
          function getPointX(r, ao) {
          return x0 + r * Math.cos(ao * Math.PI / 180)
          }
          
          // 根據半徑和角度判斷Y軸坐標
          function getPointY(r, ao) {
          return y0 + r * Math.sin(ao * Math.PI / 180)
          }
          
          // 底層的圓弧 無色
          ctx.beginPath();
          ctx.arc(x0, y0, r1, (Math.PI / 180) * startAng, (Math.PI / 180) * endAng, false);
          ctx.strokeStyle="#666";
          ctx.lineWidth=10;
          ctx.lineCap='round'; // 線的末端設置
          ctx.stroke();
          
          // 畫外層的圓弧 有色,可變動
          var blueAng=145+(250/100)*value; // 這里的value是可以根據信用分控制的
          ctx.beginPath();
          ctx.arc(x0, y0, r1, (Math.PI / 180) *startAng, (Math.PI / 180) * blueAng, false);
          var linearGradient=ctx.createLinearGradient(0,0,250,0);
          linearGradient.addColorStop(0,'#F6E259');
          linearGradient.addColorStop(1,'#F4ECB6');
          ctx.strokeStyle=linearGradient;
          ctx.lineWidth=9;
          ctx.lineCap='round'; // 線的末端設置
          ctx.stroke();
          
          // canvas中間的文字
          ctx.font="normal 80px PingFangSC-Medium"; // 字體大小,樣式
          ctx.fillStyle="#E8DA77";; // 顏色
          ctx.textAlign='center'; // 位置
          ctx.textBaseline='middle';
          ctx.moveTo(150, 155); // 文字填充位置
          ctx.fillText(value, 150, 310/2-30);
          ctx.font="normal 14px PingFangSC-Regular"; // 字體大小,樣式
          ctx.fillStyle="#E8DA77"; // 顏色
          ctx.fillText("評估于06-01 16:18:03", 150, 180);
          
          // 下方0和100的位置
          ctx.fillText("0", 46, 250);
          ctx.fillText("100", 250, 250);
          </script>

          附:

          ctx.arc(x0, y0, r1, (Math.PI / 180) * startAng, (Math.PI / 180) * endAng, false);

          這個括號里有五個參數,分別是:圓心的x軸坐標,圓心的y軸坐標,圓環的起始點角度,圓環的終點角度,順時針與否(true或者false)。


          喜歡的話,歡迎點贊支持!


          主站蜘蛛池模板: 一区在线免费观看| 一区二区三区在线|欧| 国产成人精品无码一区二区| 亚洲日韩精品国产一区二区三区| 成人在线一区二区| 人妻视频一区二区三区免费 | 一区二区三区四区视频| 国产乱码精品一区二区三区四川 | 精品国产一区二区三区AV | 影音先锋中文无码一区| 国精品无码一区二区三区在线蜜臀 | 亚洲一区精品视频在线| 最美女人体内射精一区二区| 免费人人潮人人爽一区二区| 无码人妻精品一区二区三区久久久 | 日韩色视频一区二区三区亚洲| 精品性影院一区二区三区内射| 国产在线一区二区在线视频| 亚洲国产综合无码一区二区二三区 | 人妻激情偷乱视频一区二区三区| 精品一区二区三区色花堂| 日本一区二区三区不卡视频中文字幕| 99国产精品欧美一区二区三区| 亚洲AV噜噜一区二区三区| 伊人色综合网一区二区三区| 精品福利视频一区二区三区| 激情内射亚洲一区二区三区爱妻| 精品无码AV一区二区三区不卡 | 成人中文字幕一区二区三区| 精品国产一区二区三区色欲| 无码AV中文一区二区三区| 无码AV中文一区二区三区| 亚洲午夜电影一区二区三区| 亚洲一区二区三区成人网站| 久久精品免费一区二区喷潮| 无码日本电影一区二区网站| 国产av夜夜欢一区二区三区| 国产精品自在拍一区二区不卡| V一区无码内射国产| 国产亚洲福利精品一区| 精品国产乱子伦一区二区三区 |