<!DOCTYPE html>
    <html lang="vi" xmlns="http://www.w3.org/1999/xhtml" prefix="og: http://ogp.me/ns#">
    <head>
<title>Cách vẽ các hình dạng khác nhau bằng một turtle trong Python</title>
<meta name="description" content="Cách vẽ các hình dạng khác nhau bằng một turtle trong Python - Savefile - Tin Tức -...">
<meta name="author" content=".: Nguoicodonvn2008.info - Cõi lòng người cô đơn :.">
<meta name="copyright" content=".: Nguoicodonvn2008.info - Cõi lòng người cô đơn :. [admin@nguoicodonvn2008.info]">
<meta name="robots" content="index, archive, follow, noodp">
<meta name="googlebot" content="index,archive,follow,noodp">
<meta name="msnbot" content="all,index,follow">
<meta name="generator" content="NukeViet v4.5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="og:title" content="Cách vẽ các hình dạng khác nhau bằng một turtle trong Python">
<meta property="og:type" content="website">
<meta property="og:description" content="Savefile - Tin Tức - https&#x3A;&#x002F;&#x002F;www.nguoicodonvn2008.info&#x002F;vi&#x002F;news&#x002F;savefile&#x002F;kien-thuc-may-tinh&#x002F;cach-ve-cac-hinh-dang-khac-nhau-bang-mot-turtle-trong-python-9483.html">
<meta property="og:site_name" content=".&#x3A; Nguoicodonvn2008.info - Cõi lòng người cô đơn &#x3A;.">
<meta property="og:url" content="https://www.nguoicodonvn2008.info/vi/news/savefile/kien-thuc-may-tinh/cach-ve-cac-hinh-dang-khac-nhau-bang-mot-turtle-trong-python-9483.html">
<link rel="shortcut icon" href="https://nguoicodonvn2008.info/favicon.ico">
<link rel="canonical" href="https://www.nguoicodonvn2008.info/vi/news/savefile/kien-thuc-may-tinh/cach-ve-cac-hinh-dang-khac-nhau-bang-mot-turtle-trong-python-9483.html">
<link rel="alternate" href="https://nguoicodonvn2008.info/vi/news/rss/" title="Tin Tức" type="application/rss+xml">
<link rel="alternate" href="https://nguoicodonvn2008.info/vi/news/rss/karaoke-dual/" title="Tin Tức - Karaoke Dual" type="application/rss+xml">
<link rel="alternate" href="https://nguoicodonvn2008.info/vi/news/rss/nhac-tre/" title="Tin Tức - Nhạc trẻ" type="application/rss+xml">
<link rel="alternate" href="https://nguoicodonvn2008.info/vi/news/rss/tru-tinh/" title="Tin Tức - Trữ tình" type="application/rss+xml">
<link rel="alternate" href="https://nguoicodonvn2008.info/vi/news/rss/nuoc-ngoai/" title="Tin Tức - Nước ngoài" type="application/rss+xml">
<link rel="alternate" href="https://nguoicodonvn2008.info/vi/news/rss/remix/" title="Tin Tức - Remix" type="application/rss+xml">
<link rel="alternate" href="https://nguoicodonvn2008.info/vi/news/rss/tam-su-tinh-yeu/" title="Tin Tức - Tâm sự tình yêu" type="application/rss+xml">
<link rel="alternate" href="https://nguoicodonvn2008.info/vi/news/rss/tho-suu-tam/" title="Tin Tức - Thơ sưu tầm" type="application/rss+xml">
<link rel="alternate" href="https://nguoicodonvn2008.info/vi/news/rss/cuoc-song/" title="Tin Tức - Cuộc sống" type="application/rss+xml">
<link rel="alternate" href="https://nguoicodonvn2008.info/vi/news/rss/phan-mem/" title="Tin Tức - Phần mềm" type="application/rss+xml">
<link rel="alternate" href="https://nguoicodonvn2008.info/vi/news/rss/kien-thuc-may-tinh/" title="Tin Tức - Kiến thức máy tính" type="application/rss+xml">
<link rel="alternate" href="https://nguoicodonvn2008.info/vi/news/rss/hoc-tap/" title="Tin Tức - Học tập" type="application/rss+xml">
<link rel="alternate" href="https://nguoicodonvn2008.info/vi/news/rss/tai-lieu/" title="Tin Tức - Tài liệu" type="application/rss+xml">
<link rel="alternate" href="https://nguoicodonvn2008.info/vi/news/rss/de-thi/" title="Tin Tức - Đề thi" type="application/rss+xml">
<link rel="preload" as="style" href="https://nguoicodonvn2008.info/assets/css/font-awesome.min.css" type="text/css">
<link rel="preload" as="style" href="https://nguoicodonvn2008.info/themes/default/css/bootstrap.non-responsive.css" type="text/css">
<link rel="preload" as="style" href="https://nguoicodonvn2008.info/themes/default/css/style.css" type="text/css">
<link rel="preload" as="style" href="https://nguoicodonvn2008.info/themes/default/css/style.non-responsive.css" type="text/css">
<link rel="preload" as="style" href="https://nguoicodonvn2008.info/themes/default/css/news.css" type="text/css">
<link rel="preload" as="style" href="https://nguoicodonvn2008.info/themes/default/css/custom.css" type="text/css">
<link rel="preload" as="script" href="https://nguoicodonvn2008.info/assets/js/jquery/jquery.min.js" type="text/javascript">
<link rel="preload" as="script" href="https://nguoicodonvn2008.info/assets/js/language/vi.js" type="text/javascript">
<link rel="preload" as="script" href="https://nguoicodonvn2008.info/assets/js/DOMPurify/purify3.js" type="text/javascript">
<link rel="preload" as="script" href="https://nguoicodonvn2008.info/assets/js/global.js" type="text/javascript">
<link rel="preload" as="script" href="https://nguoicodonvn2008.info/assets/js/site.js" type="text/javascript">
<link rel="preload" as="script" href="https://nguoicodonvn2008.info/themes/default/js/news.js" type="text/javascript">
<link rel="preload" as="script" href="https://nguoicodonvn2008.info/themes/default/js/main.js" type="text/javascript">
<link rel="preload" as="script" href="https://nguoicodonvn2008.info/themes/default/js/custom.js" type="text/javascript">
<link rel="preload" as="script" href="https://nguoicodonvn2008.info/themes/default/js/bootstrap.min.js" type="text/javascript">
<link rel="stylesheet" href="https://nguoicodonvn2008.info/assets/css/font-awesome.min.css">
<link rel="stylesheet" href="https://nguoicodonvn2008.info/themes/default/css/bootstrap.non-responsive.css">
<link rel="stylesheet" href="https://nguoicodonvn2008.info/themes/default/css/style.css">
<link rel="stylesheet" href="https://nguoicodonvn2008.info/themes/default/css/style.non-responsive.css">
<link rel="StyleSheet" href="https://nguoicodonvn2008.info/themes/default/css/news.css">
<link rel="stylesheet" href="https://nguoicodonvn2008.info/themes/default/css/custom.css">
<style type="text/css">
	body{background: #fff;}
</style>
    </head>
    <body>
<div id="print">
	<div id="hd_print">
		<h2 class="pull-left">.&#x3A; Nguoicodonvn2008.info - Cõi lòng người cô đơn &#x3A;.</h2>
		<p class="pull-right"><a title=".&#x3A; Nguoicodonvn2008.info - Cõi lòng người cô đơn &#x3A;." href="https://nguoicodonvn2008.info/">https://nguoicodonvn2008.info</a></p>
	</div>
	<div class="clear"></div>
	<hr />
	<div id="content">
		<h1>Cách vẽ các hình dạng khác nhau bằng một turtle trong Python</h1>
		<ul class="list-inline">
			<li>Thứ tư - 04/12/2024 23:29</li>
			<li class="hidden-print txtrequired"><em class="fa fa-print">&nbsp;</em><a title="In ra" href="javascript:;" onclick="window.print()">In ra</a></li>
			<li class="hidden-print txtrequired"><em class="fa fa-power-off">&nbsp;</em><a title="Đóng cửa sổ này" href="javascript:;" onclick="window.close()">Đóng cửa sổ này</a></li>
		</ul>
		<div class="clear"></div>
		<div id="hometext">
		</div>
				<div class="imghome">
			<img alt="Cách vẽ các hình dạng khác nhau bằng một turtle trong Python" src="https://st.quantrimang.com/photos/image/2023/02/16/con-rua-python-5.jpg" width="460" class="img-thumbnail" />
		</div>
		<div class="clear"></div>
		<div id="bodytext" class="clearfix">
			<p>Hệ thống đồ họa là một cách tuyệt vời cho người mới bắt đầu chinh phục cả&nbsp;<strong>Python&nbsp;</strong>và vẽ tranh 2D. Dưới đây là&nbsp;<strong>cách vẽ các hình dạng khác nhau bằng một turtle trong Python</strong>.</p>

<p><img alt="Lập trình Python" data-i="0" data-src="https://st.quantrimang.com/photos/image/2023/02/16/Python-turtle-7.jpg" data-was-processed="true" height="340" src="https://st.quantrimang.com/photos/image/2023/02/16/Python-turtle-7.jpg" width="650" /></p>

<p>Python có nhiều mô đun cung cấp chức năng cho rất nhiều tác vụ khác nhau. Một trong số chúng là mô đun turtle (con rùa), thường được dùng để dạy lập trình cho người mới bắt đầu.</p>

<p>Bạn có thể dùng mô đun turtle để vẽ đồ họa như đường thẳng hoặc hình dạng trên một canvas. Ban đầu, bạn có thể vẽ một hoặc nhiều con rùa trên canvas. Chúng đại diện cho các điểm mà bạn có thể di chuyển xung quanh. Khi di chuyển xung quanh, các con rùa (turtle) vẽ đường thẳng từ điểm này tới điểm khác.</p>

<p>Bạn có thể vẽ các hình dạng khác nhau theo phương pháp này, bao gồm hình vuông, tam giác và hình tròn.</p>

<h2>Cách dùng turtle để vẽ hình dạng</h2>

<p>Bạn có thể dùng Python để tạo nhiều chương trình thực tế, chẳng hạn như bảng màu. Khi vẽ các turtle trong Python, đầu tiên, bạn cần một canvas, và một đối tượng turtle để vẽ các hình dạng.</p>

<p>1. Tạo file mới mang tên&nbsp;<strong>shapes.py</strong>.</p>

<p>2. Ở phía trên cùng của file, nhập mô đun turtle:</p>

<pre id="pre0">
import turtle</pre>

<p>3. Dùng mô đun turtle để tạo một cửa sổ mới. Nó sẽ giống như một canvas để vẽ các hình dạng lên trên:</p>

<pre id="pre1">
window = turtle.Screen()
window.bgcolor(&quot;white&quot;)</pre>

<p>4. Tạo một đối tượng turtle mới, chọn hình dạng và màu sắc của nó:</p>

<pre id="pre2">
turtle_1 = turtle.Turtle()
turtle_1.shape(&quot;turtle&quot;)
turtle_1.color(&quot;red&quot;)
</pre>

<p>5. Ở phía dưới cùng của file, dùng hàm exitonclick() để giữ canvas luôn mở. Canvas này sẽ chỉ đóng khi bạn click vào nó. Đảm bảo bạn giữ đường này làm lệnh cuối cùng trong chương trình. Nếu không, bạn sẽ gặp phải lỗi.</p>

<pre id="pre3">
window.exitonclick()</pre>

<p>6. Mở một nhắc lệnh hoặc terminal, và điều hướng tới thư mục tại nơi lưu tập lệnh Python. Ví dụ, nếu lưu file Python trên desktop của Windows PC, lệnh của bạn trông sẽ tương tự như sau:</p>

<pre id="pre4">
cd C:\Users\Sharl\Desktop</pre>

<p>7. Chạy lệnh Python để mở canvas turtle. Mặc định, hướng ban đầu của con rùa và xoay mặt về bên phải:</p>

<p>&nbsp;</p>
<img alt="Con rùa trong Python" data-adbro-processed="true" data-i="1" data-src="https://st.quantrimang.com/photos/image/2023/02/16/con-rua-python-1.jpg" data-was-processed="true" height="386" src="https://st.quantrimang.com/photos/image/2023/02/16/con-rua-python-1.jpg" width="650" />
<h2>Cách vẽ hình vuông và hình chữ nhật</h2>

<p>Vẽ hình vuông hoặc chữ nhật bằng một con rùa trên canvas. Dùng các hàm<strong>&nbsp;forward()</strong>&nbsp;và&nbsp;<strong>backward()&nbsp;</strong>để di chuyển con rùa xung quanh. Bạn cũng có thể dùng hàm&nbsp;<strong>left()</strong>&nbsp;hoặc&nbsp;<strong>right()&nbsp;</strong>để thay đổi hướng mà con rùa đang hướng tới.</p>

<p>1. Vì turtle đã quay về hướng ban đầu, di chuyển về phía trước 100 pixel để vẽ đường đầu tiên của hình vuông:</p>

<pre id="pre5">
turtle_1.forward(100)</pre>

<p>2. Xoay sang trái 90 độ để đối mặt với hướng đi xuống. Di chuyển về phía trước lần nữa để vẽ cạnh thứ hai của hình vuông:</p>

<pre id="pre6">
turtle_1.right(90)
turtle_1.forward(100)</pre>

<p>3. Tiếp tục xoay sang phải 90 độ để vẽ hai cạnh còn lại. Để giữ nguyên hình vuông, đảm bảo các cạnh đều có kích thước là 100 pixel:</p>

<pre id="pre7">
turtle_1.right(90)
turtle_1.forward(100)
turtle_1.right(90)
turtle_1.forward(100)</pre>

<p>4. Để thay đổi hình dạng sang một hình chữ nhật, chỉnh sửa code để làm hai cạnh đối diện nhau dài hơn:</p>

<pre id="pre8">
turtle_1.forward(100)
turtle_1.right(90)
turtle_1.forward(200)
turtle_1.right(90)
turtle_1.forward(100)
turtle_1.right(90)
turtle_1.forward(200)</pre>

<p>5. Chạy lại lệnh Python bằng một dòng lệnh hoặc terminal để mở canvas và xem hình chữ nhật:</p>

<p><img alt="Vẽ hình chữ nhật bằng Python" data-i="2" data-src="https://st.quantrimang.com/photos/image/2023/02/16/con-rua-python-2.jpg" data-was-processed="true" height="379" src="https://st.quantrimang.com/photos/image/2023/02/16/con-rua-python-2.jpg" width="650" /></p>

<h2>Cách vẽ hình tam giác</h2>

<p>Vẽ một hình tam giác bằng hàm forward(), backward(), left(), hoặc right(). Vì bạn đã vẽ một hình vuông ở vị trí khởi đầu của canvas, hãy vẽ hình tam giác trên phần khác của canvas.</p>

<p>1. Tạo một đối tượng turtle mới. Bạn có thể thay đổi hình dạng để dùng một mũi tên thay cho&nbsp;<strong>turtle</strong>:</p>

<pre id="pre9">
turtle_2 = turtle.Turtle()
turtle_2.shape(&quot;arrow&quot;)
turtle_2.color(&quot;blue&quot;)</pre>

<p>2. Dùng hàm&nbsp;<strong>penup()</strong>&nbsp;để nhấc đối tượng con rùa ra khỏi canvas, để nó không còn vẽ một đường thẳng:</p>

<pre id="pre10">
turtle_2.penup()</pre>

<p>3. Di chuyển đối tượng sang điểm khác trên canvas. Canvas dùng một mặt phẳng Cartesian cho các tọa độ, vì thế, điểm khởi đầu của nó ở 0,0. Tọa độ -250, 200 hướng về góc bên trái phía trên cùng của canvas.</p>

<pre id="pre11">
turtle_2.goto(-250, 200)</pre>

<p>4. Dùng hàm&nbsp;<strong>pendown()</strong>&nbsp;để đặt đối tượng turtle quay trở lại canvas, sau đó, turtle có thể vẽ lại các đường thẳng:</p>

<pre id="pre12">
turtle_2.pendown()</pre>

<p>5. Vẽ 3 cạnh của hình tam giác bằng cách xoay sang trái 120 độ 3 lần. Mỗi lần, vẽ một đường để tạo cạnh của hình tam giác:</p>

<pre id="pre13">
turtle_2.forward(100)
turtle_2.left(120)
turtle_2.forward(100)
turtle_2.left(120)
turtle_2.forward(100)
turtle_2.left(120)</pre>

<p>6. Ngoài ra, tạo hình tam giác bằng một for-loop:</p>

<pre id="pre14">
for i in range(3):
  turtle_2.forward(100)
  turtle_2.left(120)</pre>

<p>7. Chạy lại lệnh Python bằng một dòng lệnh hoặc terminal để mở canvas và xem hình tam giác:</p>

<p><img alt="Chạy lại lệnh trong Python" data-i="3" data-src="https://st.quantrimang.com/photos/image/2023/02/16/con-rua-python-3.jpg" data-was-processed="true" height="349" src="https://st.quantrimang.com/photos/image/2023/02/16/con-rua-python-3.jpg" width="650" /></p>

<h2>Cách vẽ hình tròn</h2>

<p>Dùng hàm circle() để vẽ một hình tròn. Bạn có thể chọn đường kính của hình tròn bằng cách nhập một giá trị làm đối số cho hàm này.</p>

<p>1. Tạo đối tượng turtle mới khác để vẽ hình tròn, thiết lập thuộc tính màu và hình dạng của nó:</p>

<pre id="pre15">
turtle_3 = turtle.Turtle()
turtle_3.shape(&quot;circle&quot;)
turtle_3.color(&quot;green&quot;)</pre>

<p>2. Di chuyển turtle sang phần khác của canvas. Dùng hàm penup() để ngăn đối tượng vẽ một đường khi nó di chuyển. Sau khi di chuyển turtle, đặt bút xuống:</p>

<pre id="pre16">
turtle_3.penup()
turtle_3.goto(-100, 50)
turtle_3.pendown() </pre>

<p>3. Dùng hàm<strong>&nbsp;circle()</strong>&nbsp;để vẽ hình tròn. Nhập đường kính của hình tròn vào hàm.</p>

<pre id="pre17">
turtle_3.circle(50)</pre>

<p>4. Chạy lại lệnh Python bằng dòng lệnh hoặc terminal để mở canvas và xem hình tròn:</p>

<p><img alt="Vẽ hình tròn bằng Python" data-i="4" data-src="https://st.quantrimang.com/photos/image/2023/02/16/con-rua-python-4.jpg" data-was-processed="true" height="392" src="https://st.quantrimang.com/photos/image/2023/02/16/con-rua-python-4.jpg" width="650" /></p>

<h2>Cách vẽ các hình dạng như hình lục giác và bát giác</h2>

<p>Để vẽ hình dạng như hình lục giác và bát giác, bạn có thể dùng for-loop tương tự như hàm đã dùng ở ví dụ vẽ hình tam giác. Bạn có thể chọn cùng số lượng cạnh và độ dài các cạnh bằng nhau.</p>

<p>1. Tạo một đối tượng turtle mới, đặt thuộc tính hình dạng và màu sắc:</p>

<pre id="pre18">
turtle_4 = turtle.Turtle()
turtle_4.shape(&quot;turtle&quot;)
turtle_4.color(&quot;purple&quot;)</pre>

<p>2. Di chuyển đối tượng con rùa tới vị trí khác trên canvas:</p>

<pre id="pre19">
turtle_4.penup()
turtle_4.goto(150,200)
turtle_4.pendown()</pre>

<p>3. Trong hình lục giác, tại giao điểm của mỗi cạnh, góc tại điểm đó là 60 độ. Sau khi vẽ một đường thẳng, di chuyển 60 độ sang bên phải để vẽ đường thẳng tiếp theo. Làm việc này cho tất cả 6 cạnh của hình lục giác:</p>

<pre id="pre20">
for i in range(6):
  turtle_4.forward(100)
  turtle_4.right(60)</pre>

<p>4. Bạn có thể vẽ kiểu hình dạng khác với các cạnh bằng nhau bằng cách chia số cạnh cho 360 để tính giá trị của góc. Đối với hình bát giác, mỗi góc nằm giữa các cạnh là 45 độ. Đối hình bát giác, xoay phải từng cạnh theo góc 45 độ và vẽ đường thẳng:</p>

<pre id="pre21">
for i in range(8):
  turtle_4.forward(100)
  turtle_4.right(45)</pre>

<p>5. Chạy lại lệnh Python bằng một dòng lệnh hoặc terminal để mở canvas và xem hình lục giác hoặc bát giác. Bạn cũng có thể xem mã nguồn đầy đủ cho tất cả các hình dạng trên Github.</p>

<p><img alt="Vẽ hình lục giác trong Python" data-i="5" data-src="https://st.quantrimang.com/photos/image/2023/02/16/con-rua-python-5.jpg" data-was-processed="true" height="356" src="https://st.quantrimang.com/photos/image/2023/02/16/con-rua-python-5.jpg" width="650" /></p>

<p>Trên đây là&nbsp;<strong>cách vẽ các hình dạng khác nhau bằng turtle trong Python</strong>. Hi vọng bài viết hữu ích với các bạn.</p>
&nbsp;
		</div>
				<div id="author">
						<p>
				<strong>Nguồn tin:</strong>
				Quantrimang.com:
			</p>
		</div>
	</div>
	<div id="footer" class="clearfix">
		<div id="url">
			<strong>URL của bản tin này: </strong><a href="https://www.nguoicodonvn2008.info/vi/news/savefile/kien-thuc-may-tinh/cach-ve-cac-hinh-dang-khac-nhau-bang-mot-turtle-trong-python-9483.html" title="Cách vẽ các hình dạng khác nhau bằng một turtle trong Python">https://www.nguoicodonvn2008.info/vi/news/savefile/kien-thuc-may-tinh/cach-ve-cac-hinh-dang-khac-nhau-bang-mot-turtle-trong-python-9483.html</a>

		</div>
		<div class="clear"></div>
		<div class="copyright">
			&copy; .&#x3A; Nguoicodonvn2008.info - Cõi lòng người cô đơn &#x3A;.
		</div>
		<div id="contact">
			<a href="mailto:admin@nguoicodonvn2008.info">admin@nguoicodonvn2008.info</a>
		</div>
	</div>
</div>
        <div id="timeoutsess" class="chromeframe">
            Bạn đã không sử dụng Site, <a onclick="timeoutsesscancel();" href="https://nguoicodonvn2008.info/#">Bấm vào đây để duy trì trạng thái đăng nhập</a>. Thời gian chờ: <span id="secField"> 60 </span> giây
        </div>
        <div id="openidResult" class="nv-alert" style="display:none"></div>
        <div id="openidBt" data-result="" data-redirect=""></div>
		</script>
		<div class="car-top">
  <span><img src="https://nguoicodonvn2008.info/themes/default/images/car.png" alt=""></span>
</div>
<script src="https://nguoicodonvn2008.info/assets/js/jquery/jquery.min.js"></script>
<script>var nv_base_siteurl="/",nv_lang_data="vi",nv_lang_interface="vi",nv_name_variable="nv",nv_fc_variable="op",nv_lang_variable="language",nv_module_name="news",nv_func_name="savefile",nv_is_user=0, nv_my_ofs=-4,nv_my_abbr="EDT",nv_cookie_prefix="nv4c_e856T",nv_check_pass_mstime=1738000,nv_area_admin=0,nv_safemode=0,theme_responsive=0,nv_recaptcha_ver=2,nv_recaptcha_sitekey="",nv_recaptcha_type="image",XSSsanitize=1;</script>
<script src="https://nguoicodonvn2008.info/assets/js/language/vi.js"></script>
<script src="https://nguoicodonvn2008.info/assets/js/DOMPurify/purify3.js"></script>
<script src="https://nguoicodonvn2008.info/assets/js/global.js"></script>
<script src="https://nguoicodonvn2008.info/assets/js/site.js"></script>
<script src="https://nguoicodonvn2008.info/themes/default/js/news.js"></script>
<script src="https://nguoicodonvn2008.info/themes/default/js/main.js"></script>
<script src="https://nguoicodonvn2008.info/themes/default/js/custom.js"></script>
<script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "Organization",
            "url": "https://nguoicodonvn2008.info",
            "logo": "https://nguoicodonvn2008.info/uploads/angel.gif"
        }
        </script>
<script src="https://nguoicodonvn2008.info/themes/default/js/bootstrap.min.js"></script>
<script type="text/javascript">
var $scrolltop = $('.car-top');
$scrolltop.on('click', function () {
    $('html,body').animate({
        scrollTop: 0
    }, 800);
    $(this).addClass("car-run");
    setTimeout(function(){ $scrolltop.removeClass('car-run');}, 1000);
    return false;
});
$(window).on('scroll', function ()
{ 
    if($(window).scrollTop() >= 200)
    {
        $scrolltop.addClass("show");
        $scrolltop.addClass("car-down");
    }
    else
    {
       $scrolltop.removeClass("show");
       setTimeout(function(){ $scrolltop.removeClass('car-down');}, 300);
    }
});
</script>
</body>
</html>