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）。

喜歡的話，歡迎點贊支持！

在線咨詢

上一篇：小白必備！純原生前端技術打造仿小米電商網站精品項目教
下一篇：HTML DOM Option 對象

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

python海龜繪圖turtle（三）：繪圖命令

您的項目需求