Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 亚洲国产精品免费在线观看,日本人与黑人videos系列,国产精品视频网站 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          python海龜繪圖turtle（三）：繪圖命令
          
        
           
          
	
	
          
		python海龜繪圖turtle（三）：繪圖命令
          
                        
          龜繪圖(turtle)是python的一個(gè)有趣的內(nèi)置模塊，是python語(yǔ)言的標(biāo)準(zhǔn)庫(kù)之一，是入門級(jí)的圖形繪制函數(shù)庫(kù)。
          turtle通過(guò)一組函數(shù)控制畫筆的行進(jìn)動(dòng)作，進(jìn)而繪制形狀，這些函數(shù)命令分別是：畫筆控制方法、方向控制方法和全局控制方法。
          一、畫筆控制方法
          抬筆
          penup()、pu()、up()
          畫筆抬起，移動(dòng)時(shí)不繪制圖形
          落筆
          pendown()、pd()、down()
          畫筆落下，移動(dòng)時(shí)繪制圖形，缺省時(shí)也為畫筆落下
          定位
          goto(x,y)、setpos(x,y)、setposition(x,y)
          將畫筆移動(dòng)到坐標(biāo)為x，y的位置由當(dāng)前坐標(biāo)前往指定坐標(biāo)，這里使用絕對(duì)坐標(biāo)，但畫筆方向不會(huì)改變

          二、方向控制方法
          前進(jìn)
          forward(s)、
          fd(s)
          海龜前進(jìn)s指定的距離，方向?yàn)楹｝數(shù)某颉?/span>
          后退
          backward(s)、bk(s)、back(s)
          海龜后退s指定的距離，方向與海龜?shù)某蛳喾础２桓淖兒｝數(shù)某颉?/span>
          改變
          方向
          setheading
          (angle)、
          seth(angle)
          以絕對(duì)角度改變方向
          左轉(zhuǎn)
          left(angle)、
          lt(angle)
          海龜左轉(zhuǎn) angle 個(gè)單位。(單位默認(rèn)為角度，但可通過(guò) degrees() 和 radians() 函數(shù)改變?cè)O(shè)置。)
          右轉(zhuǎn)
          right(angle)、
          rt(angle)
          海龜右轉(zhuǎn) angle 個(gè)單位。(單位默認(rèn)為角度，但可通過(guò) degrees() 和 radians() 函數(shù)改變?cè)O(shè)置。)
          畫圓
          circle(r,angle)
          以畫筆（海龜）左側(cè)為圓心，半徑為r像素，畫angle度的圓形。注意：海龜方向同時(shí)發(fā)生angle度變化
          畫圓
          畫弧
          circle(radius, extent=None, steps=None)
          繪制一個(gè) radius 指定半徑的圓。圓心在海龜左邊 radius 個(gè)單位；extent 為一個(gè)夾角，用來(lái)決定繪制圓的一部分。如未指定 extent則繪制整個(gè)圓。如果extent 不是完整圓周，則以當(dāng)前畫筆位置為一個(gè)端點(diǎn)繪制圓弧。如果 radius 為正值則朝逆時(shí)針?lè)较蚶L制圓弧，否則朝順時(shí)針?lè)较颉Ｗ罱K海龜?shù)某驎?huì)依據(jù) extent 的值而改變。

          三、 全局控制方法
          清空
          clear()
          清空窗口，但是turtle的位置和狀態(tài)不會(huì)改變
          重置
          reset()
          清空窗口，重置turtle狀態(tài)為起始狀態(tài)
          撤消
          undo()
          撤消 (或連續(xù)撤消) 最近的一個(gè) (或多個(gè)) 海龜動(dòng)作。可撤消的次數(shù)由撤消緩沖區(qū)的大小決定。
          印章
          stamp()
          在海龜當(dāng)前位置印制一個(gè)海龜形狀。返回該印章的 stamp_id，印章可以通過(guò)調(diào)用 clearstamp(stamp_id) 來(lái)刪除。
          文本
          write(arg,
          move, align="left", font=("fonnt-ame",font-size,"font-type"))
          寫文本，arg為文本內(nèi)容，moveo 可選參數(shù)，用于指定是否移動(dòng)畫筆到文本的右下角，默認(rèn)為False (不移動(dòng))。
          align：可選參數(shù)，用于指定文字的對(duì)齊方式，其參數(shù)值為left（居左）、center（居中）或者right（居右）中的任意一個(gè)，默認(rèn)為left。
          font：可選參數(shù)，用于指定字體、字號(hào)和字形，通過(guò)一個(gè)三元組(字體,字號(hào),字形)指定
          停止
          done()
          暫停程序,停止畫筆繪制, 等待用戶操作，窗口不自動(dòng)關(guān)閉。是海龜繪圖程序中的最后一個(gè)語(yǔ)句。
          四、其他的一些特殊方法
          更多函數(shù)可以通過(guò)官方文檔查看：https://docs.python.org/3/library/turtle.html
          css3之前，并沒有直接的設(shè)置元素圓角的屬性，那如何實(shí)現(xiàn)設(shè)計(jì)圖中的圓角設(shè)定呢？
          如：表單demo中的文本框圓角。


          一般通過(guò)在PS 軟件中截取上左、上右、下左、下右四個(gè)邊角的圓角圖片，通過(guò)background-position背景圖屬性設(shè)定位置，從而實(shí)現(xiàn)圓角的設(shè)定。
          或是將四個(gè)圓角圖片當(dāng)做四個(gè)img標(biāo)簽，通過(guò)position定位屬性找尋設(shè)定的位置，如：

          通過(guò)圖片設(shè)定圓角

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

          近在看自己的頭條權(quán)益的時(shí)候，看到這個(gè)信用分圖片，出于職業(yè)的好奇心，研究一下這個(gè)半環(huán)圖的畫法。
          實(shí)現(xiàn)這個(gè)半圓圖，有兩種方案。第一種方案，走css路線，首先畫一個(gè)整的圓環(huán)，通過(guò)兩塊擋板的旋轉(zhuǎn)展現(xiàn)出一部分的環(huán)形。第二種方案，通過(guò)canvas畫圖實(shí)現(xiàn)半環(huán)圖。我認(rèn)為還是第二種方案更好實(shí)現(xiàn)。今天我就教大家如何使用canvas實(shí)現(xiàn)這個(gè)圖。
          首先創(chuàng)建一個(gè)html文件。在<body></body>標(biāo)簽里創(chuàng)建一個(gè)canvas標(biāo)簽，定義一下畫布的大小。
          <!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元素，換個(gè)瀏覽器試試吧</span>
</canvas>
</body>
</html>
          然后開始寫js，在canvas標(biāo)簽里畫圓弧。
          var c=document.getElementById('score');
var ctx=c.getContext("2d");
var value=c.attributes['data-score'].value;

const x0=150; // 圓心坐標(biāo)
const y0=155;// 圓心坐標(biāo)
const r1=130; // 外圓半徑
const startAng=145; // 起始角度
const endAng=35;

// 根據(jù)半徑和角度判斷x軸坐標(biāo)
function getPointX(r, ao) {
return x0 + r * Math.cos(ao * Math.PI / 180)
}

// 根據(jù)半徑和角度判斷Y軸坐標(biāo)
function getPointY(r, ao) {
return y0 + r * Math.sin(ao * Math.PI / 180)
}

// 底層的圓弧 無(wú)色
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'; // 線的末端設(shè)置
ctx.stroke();
          在瀏覽器打開，出現(xiàn)的效果如下：

          圓環(huán)已經(jīng)初見成效。興奮，激動(dòng)，哈哈。這個(gè)圓弧是底層圓弧，是不會(huì)變動(dòng)的。接下來(lái)畫第二層圓弧，可以隨著信用分變動(dòng)的部分。上js代碼
          // 畫外層的圓弧 有色,可變動(dòng)
var blueAng=145+(250/100)*value; // 這里的value是可以根據(jù)信用分控制的
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'; // 線的末端設(shè)置
ctx.stroke();
          請(qǐng)看效果圖：

          然后就是填充中間的文字，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("評(píng)估于06-01 16:18:03", 150, 180);
          效果露一下啊：

          說(shuō)了這么多，附上完整代碼，你可以直接粘貼復(fù)制看看效果。
          <!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元素，換個(gè)瀏覽器試試吧</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; // 圓心坐標(biāo)
const y0=155;// 圓心坐標(biāo)
const r1=130; // 外圓半徑
const startAng=145; // 起始角度
const endAng=35;

// 根據(jù)半徑和角度判斷x軸坐標(biāo)
function getPointX(r, ao) {
return x0 + r * Math.cos(ao * Math.PI / 180)
}

// 根據(jù)半徑和角度判斷Y軸坐標(biāo)
function getPointY(r, ao) {
return y0 + r * Math.sin(ao * Math.PI / 180)
}

// 底層的圓弧 無(wú)色
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'; // 線的末端設(shè)置
ctx.stroke();

// 畫外層的圓弧 有色,可變動(dòng)
var blueAng=145+(250/100)*value; // 這里的value是可以根據(jù)信用分控制的
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'; // 線的末端設(shè)置
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("評(píng)估于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);
          這個(gè)括號(hào)里有五個(gè)參數(shù)，分別是：圓心的x軸坐標(biāo)，圓心的y軸坐標(biāo)，圓環(huán)的起始點(diǎn)角度，圓環(huán)的終點(diǎn)角度，順時(shí)針與否（true或者false）。
          喜歡的話，歡迎點(diǎn)贊支持！
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
日韩精品无码免费一区二区三区|
亚洲国产专区一区|
亚洲精品色播一区二区|
国产日韩视频一区|
精品爆乳一区二区三区无码av|
亚洲AV无码一区二三区|
麻豆AV天堂一区二区香蕉|
综合久久一区二区三区|
无码人妻精品一区二|
久久精品国内一区二区三区|
日韩人妻无码一区二区三区久久|
午夜视频久久久久一区
|
亚洲av区一区二区三|
亚洲国产精品无码第一区二区三区|
亚洲乱码日产一区三区|
精品人妻少妇一区二区三区|
精品一区二区三区影院在线午夜|
日韩在线一区二区|
精品不卡一区二区|
2020天堂中文字幕一区在线观|
精品一区二区三区免费|
久久久久99人妻一区二区三区|
亚洲国模精品一区|
久久se精品一区精品二区国产|
精品一区二区三区四区电影|
国产成人高清亚洲一区久久|
国产福利一区二区|
日韩精品一区二区三区视频|
日本视频一区二区三区|
精品中文字幕一区在线|
国产精久久一区二区三区|
中文字幕不卡一区|
日本欧洲视频一区|
色欲综合一区二区三区|
色狠狠色狠狠综合一区|
在线视频精品一区|
福利一区福利二区|
亚洲线精品一区二区三区影音先锋
|
亚洲性色精品一区二区在线|
精品少妇人妻AV一区二区|
国产精品熟女视频一区二区|