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);

效果露一下啊：

说了这么多，附上完整代码，你可以直接粘贴复制看看效果。

<!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（三）：绘图命令

您的项目需求