﻿<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>其他 - Linux迷</title>
	<atom:link href="https://www.linuxmi.com/qita/feed" rel="self" type="application/rss+xml" />
	<link>https://www.linuxmi.com</link>
	<description>分享Linux和编程</description>
	<lastBuildDate>Fri, 12 Nov 2021 00:23:07 +0000</lastBuildDate>
	<language>zh-Hans</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.3</generator>

<image>
	<url>https://www.linuxmi.com/wp-content/uploads/2020/02/cropped-Favicon-32x32.png</url>
	<title>其他 - Linux迷</title>
	<link>https://www.linuxmi.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>HTML5教程：让我们用JS创建一个绘图APP</title>
		<link>https://www.linuxmi.com/html5-js-drawing-app.html?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=html5-js-drawing-app</link>
					<comments>https://www.linuxmi.com/html5-js-drawing-app.html#respond</comments>
		
		<dc:creator><![CDATA[linuxmi]]></dc:creator>
		<pubDate>Fri, 12 Nov 2021 00:22:04 +0000</pubDate>
				<category><![CDATA[其他]]></category>
		<category><![CDATA[HTML5]]></category>
		<guid isPermaLink="false">https://www.linuxmi.com/?p=10600</guid>

					<description><![CDATA[<p>在本文中，我将向您展示如何使用 JavaScript 和 HTML5 Canvas创建绘图/绘图应用 &#8230;</p>
<p>The post <a href="https://www.linuxmi.com/html5-js-drawing-app.html">HTML5教程：让我们用JS创建一个绘图APP</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>在本文中，我将向您展示如何使用 JavaScript 和 HTML5 Canvas创建绘图/绘图应用程序。</p>
<h2><a href="https://dev.to/0shuvo0/lets-create-a-drawing-app-with-js-4ej3#features" name="features"></a>特征：</h2>
<ol>
<li>在Canvas画布上绘画</li>
<li>多种颜色</li>
<li>清除画布</li>
<li>将绘图另存为图像</li>
</ol>
<p>首先让我们创建一个带有 canvas 元素的 index.html 文件。</p>
<pre class="pure-highlightjs"><code class="http">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;title&gt;www.linuxmi.com - JavaScript Drawing APP&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;canvas id="canvas"&gt;&lt;/canvas&gt;

    &lt;script src="main.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>现在让我们创建具有基本重置的style.css</p>
<pre class="highlight css"><code><span class="o">*</span><span class="p">{</span>
    <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span></code></pre>
<p>最后，我们将创建我们的 main.js，我们将定位我们的画布并将其大小设置为我们的屏幕大小。</p>
<pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">canvas</span><span class="dl">"</span><span class="p">)</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span>

<span class="c1">// ctx 是我们画布的上下文</span>
<span class="c1">// 我们使用 ctx 在画布上绘制</span>
<span class="kd">const</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="dl">"</span><span class="s2">2d</span><span class="dl">"</span><span class="p">)</span>

<span class="c1">// 让我们创建一个矩形用于测试目的</span>
<span class="nx">ctx</span><span class="p">.</span><span class="nx">fillStyle</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span>
<span class="nx">ctx</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span></code></pre>
<p>现在，如果我们在浏览器中打开它，我们应该会看到一个红色矩形。</p>
<p><img fetchpriority="high" decoding="async" class="alignnone size-full wp-image-10601" src="https://www.linuxmi.com/wp-content/uploads/2021/11/html5-js-drawing-app-1.png" alt="" width="1920" height="1080" /></p>
<p>好的，让我们删除这个矩形当使用者移动他的鼠标时我们想要得到鼠标的位置。我们可以使用mousemove事件。</p>
<pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">canvas</span><span class="dl">"</span><span class="p">)</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span>

<span class="kd">const</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="dl">"</span><span class="s2">2d</span><span class="dl">"</span><span class="p">)</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousemove</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Mouse X: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span><span class="p">)</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Mouse Y: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span><span class="p">)</span>
<span class="p">})</span></code></pre>
<p><img decoding="async" class="alignnone size-full wp-image-10602" src="https://www.linuxmi.com/wp-content/uploads/2021/11/html5-js-drawing-app-2.png" alt="" width="1920" height="1080" /></p>
<p>现在我们还需要跟踪上一个鼠标位置，并从上一个鼠标位置到当前鼠标位置画一条线。</p>
<pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">canvas</span><span class="dl">"</span><span class="p">)</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span>

<span class="kd">const</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="dl">"</span><span class="s2">2d</span><span class="dl">"</span><span class="p">)</span>

<span class="c1">// previous mouse positions</span>
<span class="c1">// They will be null initially</span>
<span class="kd">let</span> <span class="nx">prevX</span> <span class="o">=</span> <span class="kc">null</span>
<span class="kd">let</span> <span class="nx">prevY</span> <span class="o">=</span> <span class="kc">null</span>

<span class="c1">// How thick the lines should be</span>
<span class="nx">ctx</span><span class="p">.</span><span class="nx">lineWidth</span> <span class="o">=</span> <span class="mi">5</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousemove</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="c1">// initially previous mouse positions are null</span>
    <span class="c1">// so we can't draw a line</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">prevX</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">||</span> <span class="nx">prevY</span> <span class="o">==</span> <span class="kc">null</span><span class="p">){</span>
        <span class="c1">// Set the previous mouse positions to the current mouse positions</span>
        <span class="nx">prevX</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span>
        <span class="nx">prevY</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span>
        <span class="k">return</span>
    <span class="p">}</span> 

    <span class="c1">// Current mouse position</span>
    <span class="kd">let</span> <span class="nx">currentX</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span>
    <span class="kd">let</span> <span class="nx">currentY</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span>

    <span class="c1">// Drawing a line from the previous mouse position to the current mouse position</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">()</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">moveTo</span><span class="p">(</span><span class="nx">prevX</span><span class="p">,</span> <span class="nx">prevY</span><span class="p">)</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="nx">currentX</span><span class="p">,</span> <span class="nx">currentY</span><span class="p">)</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">stroke</span><span class="p">()</span>

    <span class="c1">// Update previous mouse position</span>
    <span class="nx">prevX</span> <span class="o">=</span> <span class="nx">currentX</span>
    <span class="nx">prevY</span> <span class="o">=</span> <span class="nx">currentY</span>
<span class="p">})</span></code></pre>
<p><img decoding="async" class="alignnone size-full wp-image-10603" src="https://www.linuxmi.com/wp-content/uploads/2021/11/html5-js-drawing-app-3.png" alt="" width="1920" height="1080" /></p>
<p>现在，如果您移动鼠标，您将看到将绘制一条线。但我们不希望这条线不受控制地绘制。所以我们将声明一个变量<code>let draw = false</code>。我们将只绘制<code>draw</code> 是 <code>true</code>。</p>
<p>所以我们可以监听<code>mousedown</code>和<code>mouseup</code>事件。并设置<code>draw</code>为<code>true</code>用户按下鼠标时和<code>false</code>释放鼠标时。</p>
<pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">canvas</span><span class="dl">"</span><span class="p">)</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span>

<span class="kd">const</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="dl">"</span><span class="s2">2d</span><span class="dl">"</span><span class="p">)</span>

<span class="kd">let</span> <span class="nx">prevX</span> <span class="o">=</span> <span class="kc">null</span>
<span class="kd">let</span> <span class="nx">prevY</span> <span class="o">=</span> <span class="kc">null</span>

<span class="nx">ctx</span><span class="p">.</span><span class="nx">lineWidth</span> <span class="o">=</span> <span class="mi">5</span>

<span class="kd">let</span> <span class="nx">draw</span> <span class="o">=</span> <span class="kc">false</span>

<span class="c1">// Set draw to true when mouse is pressed</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousedown</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">draw</span> <span class="o">=</span> <span class="kc">true</span><span class="p">)</span>
<span class="c1">// Set draw to false when mouse is released</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseup</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">draw</span> <span class="o">=</span> <span class="kc">false</span><span class="p">)</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousemove</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="c1">// if draw is false then we won't draw</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">prevX</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">||</span> <span class="nx">prevY</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">||</span> <span class="o">!</span><span class="nx">draw</span><span class="p">){</span>
        <span class="nx">prevX</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span>
        <span class="nx">prevY</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span>
        <span class="k">return</span>
    <span class="p">}</span>

    <span class="kd">let</span> <span class="nx">currentX</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span>
    <span class="kd">let</span> <span class="nx">currentY</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span>

    <span class="nx">ctx</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">()</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">moveTo</span><span class="p">(</span><span class="nx">prevX</span><span class="p">,</span> <span class="nx">prevY</span><span class="p">)</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="nx">currentX</span><span class="p">,</span> <span class="nx">currentY</span><span class="p">)</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">stroke</span><span class="p">()</span>

    <span class="nx">prevX</span> <span class="o">=</span> <span class="nx">currentX</span>
    <span class="nx">prevY</span> <span class="o">=</span> <span class="nx">currentY</span>
<span class="p">})</span></code></pre>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-10605" src="https://www.linuxmi.com/wp-content/uploads/2021/11/html5-js-drawing-app-4.png" alt="" width="1920" height="1080" /></p>
<p>太棒了！现在让我们在 HTML 中添加一些按钮来更改颜色、清除画布和保存绘图。</p>
<pre class="highlight html"><code><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
<span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"style.css"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;title&gt;Linux迷 www.linuxmi.com</span><span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;canvas</span> <span class="na">id=</span><span class="s">"canvas"</span><span class="nt">&gt;&lt;/canvas&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav"</span><span class="nt">&gt;</span>
        <span class="c">&lt;!-- We will be accessing the data-clr in JavaScript --&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"clr"</span> <span class="na">data-clr=</span><span class="s">"#000"</span><span class="nt">&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"clr"</span> <span class="na">data-clr=</span><span class="s">"#EF626C"</span><span class="nt">&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"clr"</span> <span class="na">data-clr=</span><span class="s">"#fdec03"</span><span class="nt">&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"clr"</span> <span class="na">data-clr=</span><span class="s">"#24d102"</span><span class="nt">&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"clr"</span> <span class="na">data-clr=</span><span class="s">"#fff"</span><span class="nt">&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"clear"</span><span class="nt">&gt;</span>clear<span class="nt">&lt;/button&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"save"</span><span class="nt">&gt;</span>save<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"main.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span></code></pre>
<p>我们还需要在我们的 css 中设置它们的样式。</p>
<pre class="highlight css"><code><span class="o">*</span><span class="p">{</span>
    <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.nav</span><span class="p">{</span>
    <span class="nl">width</span><span class="p">:</span> <span class="m">310px</span><span class="p">;</span>
    <span class="nl">height</span><span class="p">:</span> <span class="m">50px</span><span class="p">;</span>
    <span class="nl">position</span><span class="p">:</span> <span class="nb">fixed</span><span class="p">;</span>
    <span class="nl">top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="nl">left</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span>
    <span class="nl">transform</span><span class="p">:</span> <span class="n">translateX</span><span class="p">(</span><span class="m">-50%</span><span class="p">);</span>
    <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
    <span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
    <span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-around</span><span class="p">;</span>
    <span class="nl">opacity</span><span class="p">:</span> <span class="m">.3</span><span class="p">;</span>
    <span class="nl">transition</span><span class="p">:</span> <span class="n">opacity</span> <span class="m">.5s</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.nav</span><span class="nd">:hover</span><span class="p">{</span>
    <span class="nl">opacity</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.clr</span><span class="p">{</span>
    <span class="nl">height</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span>
    <span class="nl">width</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span>
    <span class="nl">background-color</span><span class="p">:</span> <span class="no">blue</span><span class="p">;</span>
    <span class="nl">border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span>
    <span class="nl">border</span><span class="p">:</span> <span class="m">3px</span> <span class="nb">solid</span> <span class="nb">rgb</span><span class="p">(</span><span class="m">214</span><span class="p">,</span> <span class="m">214</span><span class="p">,</span> <span class="m">214</span><span class="p">);</span>
    <span class="nl">transition</span><span class="p">:</span> <span class="n">transform</span> <span class="m">.5s</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.clr</span><span class="nd">:hover</span><span class="p">{</span>
    <span class="nl">transform</span><span class="p">:</span> <span class="n">scale</span><span class="p">(</span><span class="m">1.2</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.clr</span><span class="nd">:nth-child</span><span class="o">(</span><span class="err">1</span><span class="o">)</span><span class="p">{</span>
    <span class="nl">background-color</span><span class="p">:</span> <span class="m">#000</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.clr</span><span class="nd">:nth-child</span><span class="o">(</span><span class="err">2</span><span class="o">)</span><span class="p">{</span>
    <span class="nl">background-color</span><span class="p">:</span> <span class="m">#EF626C</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.clr</span><span class="nd">:nth-child</span><span class="o">(</span><span class="err">3</span><span class="o">)</span><span class="p">{</span>
    <span class="nl">background-color</span><span class="p">:</span> <span class="m">#fdec03</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.clr</span><span class="nd">:nth-child</span><span class="o">(</span><span class="err">4</span><span class="o">)</span><span class="p">{</span>
    <span class="nl">background-color</span><span class="p">:</span> <span class="m">#24d102</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.clr</span><span class="nd">:nth-child</span><span class="o">(</span><span class="err">5</span><span class="o">)</span><span class="p">{</span>
    <span class="nl">background-color</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">button</span><span class="p">{</span>
    <span class="nl">border</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
    <span class="nl">outline</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
    <span class="nl">padding</span><span class="p">:</span> <span class="m">.6em</span> <span class="m">1em</span><span class="p">;</span>
    <span class="nl">border-radius</span><span class="p">:</span> <span class="m">3px</span><span class="p">;</span>
    <span class="nl">background-color</span><span class="p">:</span> <span class="m">#03bb56</span><span class="p">;</span>
    <span class="nl">color</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.save</span><span class="p">{</span>
    <span class="nl">background-color</span><span class="p">:</span> <span class="m">#0f65d4</span><span class="p">;</span>
<span class="p">}</span></code></pre>
<p>成功后的页面应该看起来像这样。</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-10606" src="https://www.linuxmi.com/wp-content/uploads/2021/11/html5-js-drawing-app-5.png" alt="" width="1920" height="1080" /></p>
<p>现在，每当单击具有 clr 类的 div 时，我们都会添加以将线条的颜色设置为该 div 的 data-clr 属性。</p>
<pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">canvas</span><span class="dl">"</span><span class="p">)</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span>

<span class="kd">const</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="dl">"</span><span class="s2">2d</span><span class="dl">"</span><span class="p">)</span>

<span class="kd">let</span> <span class="nx">prevX</span> <span class="o">=</span> <span class="kc">null</span>
<span class="kd">let</span> <span class="nx">prevY</span> <span class="o">=</span> <span class="kc">null</span>

<span class="nx">ctx</span><span class="p">.</span><span class="nx">lineWidth</span> <span class="o">=</span> <span class="mi">5</span>

<span class="kd">let</span> <span class="nx">draw</span> <span class="o">=</span> <span class="kc">false</span>

<span class="c1">// Selecting all the div that has a class of clr</span>
<span class="kd">let</span> <span class="nx">clrs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">.clr</span><span class="dl">"</span><span class="p">)</span>
<span class="c1">// Converting NodeList to Array</span>
<span class="nx">clrs</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="k">from</span><span class="p">(</span><span class="nx">clrs</span><span class="p">)</span>

<span class="nx">clrs</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">clr</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nx">clr</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
        <span class="nx">ctx</span><span class="p">.</span><span class="nx">strokeStyle</span> <span class="o">=</span> <span class="nx">clr</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">clr</span>
    <span class="p">})</span>
<span class="p">})</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousedown</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">draw</span> <span class="o">=</span> <span class="kc">true</span><span class="p">)</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseup</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">draw</span> <span class="o">=</span> <span class="kc">false</span><span class="p">)</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousemove</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">prevX</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">||</span> <span class="nx">prevY</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">||</span> <span class="o">!</span><span class="nx">draw</span><span class="p">){</span>
        <span class="nx">prevX</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span>
        <span class="nx">prevY</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span>
        <span class="k">return</span>
    <span class="p">}</span>

    <span class="kd">let</span> <span class="nx">currentX</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span>
    <span class="kd">let</span> <span class="nx">currentY</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span>

    <span class="nx">ctx</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">()</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">moveTo</span><span class="p">(</span><span class="nx">prevX</span><span class="p">,</span> <span class="nx">prevY</span><span class="p">)</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="nx">currentX</span><span class="p">,</span> <span class="nx">currentY</span><span class="p">)</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">stroke</span><span class="p">()</span>

    <span class="nx">prevX</span> <span class="o">=</span> <span class="nx">currentX</span>
    <span class="nx">prevY</span> <span class="o">=</span> <span class="nx">currentY</span>
<span class="p">})</span></code></pre>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-10607" src="https://www.linuxmi.com/wp-content/uploads/2021/11/html5-js-drawing-app-6.png" alt="" width="1920" height="1080" /></p>
<p>OK！现在让清除按钮起作用。 所以当我们点击它时，它应该清除我们的画布。</p>
<pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">canvas</span><span class="dl">"</span><span class="p">)</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span>

<span class="kd">const</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="dl">"</span><span class="s2">2d</span><span class="dl">"</span><span class="p">)</span>

<span class="kd">let</span> <span class="nx">prevX</span> <span class="o">=</span> <span class="kc">null</span>
<span class="kd">let</span> <span class="nx">prevY</span> <span class="o">=</span> <span class="kc">null</span>

<span class="nx">ctx</span><span class="p">.</span><span class="nx">lineWidth</span> <span class="o">=</span> <span class="mi">5</span>

<span class="kd">let</span> <span class="nx">draw</span> <span class="o">=</span> <span class="kc">false</span>

<span class="kd">let</span> <span class="nx">clrs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">.clr</span><span class="dl">"</span><span class="p">)</span>
<span class="nx">clrs</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="k">from</span><span class="p">(</span><span class="nx">clrs</span><span class="p">)</span>
<span class="nx">clrs</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">clr</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nx">clr</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
        <span class="nx">ctx</span><span class="p">.</span><span class="nx">strokeStyle</span> <span class="o">=</span> <span class="nx">clr</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">clr</span>
    <span class="p">})</span>
<span class="p">})</span>

<span class="kd">let</span> <span class="nx">clearBtn</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.clear</span><span class="dl">"</span><span class="p">)</span>
<span class="nx">clearBtn</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="c1">// Clearning the entire canvas</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span>
<span class="p">})</span>


<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousedown</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">draw</span> <span class="o">=</span> <span class="kc">true</span><span class="p">)</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseup</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">draw</span> <span class="o">=</span> <span class="kc">false</span><span class="p">)</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousemove</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">prevX</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">||</span> <span class="nx">prevY</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">||</span> <span class="o">!</span><span class="nx">draw</span><span class="p">){</span>
        <span class="nx">prevX</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span>
        <span class="nx">prevY</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span>
        <span class="k">return</span>
    <span class="p">}</span>

    <span class="kd">let</span> <span class="nx">currentX</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span>
    <span class="kd">let</span> <span class="nx">currentY</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span>

    <span class="nx">ctx</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">()</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">moveTo</span><span class="p">(</span><span class="nx">prevX</span><span class="p">,</span> <span class="nx">prevY</span><span class="p">)</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="nx">currentX</span><span class="p">,</span> <span class="nx">currentY</span><span class="p">)</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">stroke</span><span class="p">()</span>

    <span class="nx">prevX</span> <span class="o">=</span> <span class="nx">currentX</span>
    <span class="nx">prevY</span> <span class="o">=</span> <span class="nx">currentY</span>
<span class="p">})</span></code></pre>
<p>差不多好了！ 现在我们要做的就是在单击保存按钮时保存我们的绘图。</p>
<p>所以这是最终的 JavaScript 代码</p>
<pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">canvas</span><span class="dl">"</span><span class="p">)</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span>

<span class="kd">const</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="dl">"</span><span class="s2">2d</span><span class="dl">"</span><span class="p">)</span>

<span class="kd">let</span> <span class="nx">prevX</span> <span class="o">=</span> <span class="kc">null</span>
<span class="kd">let</span> <span class="nx">prevY</span> <span class="o">=</span> <span class="kc">null</span>

<span class="nx">ctx</span><span class="p">.</span><span class="nx">lineWidth</span> <span class="o">=</span> <span class="mi">5</span>

<span class="kd">let</span> <span class="nx">draw</span> <span class="o">=</span> <span class="kc">false</span>

<span class="kd">let</span> <span class="nx">clrs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">.clr</span><span class="dl">"</span><span class="p">)</span>
<span class="nx">clrs</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="k">from</span><span class="p">(</span><span class="nx">clrs</span><span class="p">)</span>
<span class="nx">clrs</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">clr</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nx">clr</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
        <span class="nx">ctx</span><span class="p">.</span><span class="nx">strokeStyle</span> <span class="o">=</span> <span class="nx">clr</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">clr</span>
    <span class="p">})</span>
<span class="p">})</span>

<span class="kd">let</span> <span class="nx">clearBtn</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.clear</span><span class="dl">"</span><span class="p">)</span>
<span class="nx">clearBtn</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span>
<span class="p">})</span>

<span class="c1">// Saving drawing as image</span>
<span class="kd">let</span> <span class="nx">saveBtn</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.save</span><span class="dl">"</span><span class="p">)</span>
<span class="nx">saveBtn</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="kd">let</span> <span class="nx">data</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">toDataURL</span><span class="p">(</span><span class="dl">"</span><span class="s2">imag/png</span><span class="dl">"</span><span class="p">)</span>
    <span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">a</span><span class="dl">"</span><span class="p">)</span>
    <span class="nx">a</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">data</span>
    <span class="c1">// what ever name you specify here</span>
    <span class="c1">// the image will be saved as that name</span>
    <span class="nx">a</span><span class="p">.</span><span class="nx">download</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">sketch.png</span><span class="dl">"</span>
    <span class="nx">a</span><span class="p">.</span><span class="nx">click</span><span class="p">()</span>
<span class="p">})</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousedown</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">draw</span> <span class="o">=</span> <span class="kc">true</span><span class="p">)</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseup</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">draw</span> <span class="o">=</span> <span class="kc">false</span><span class="p">)</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousemove</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">prevX</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">||</span> <span class="nx">prevY</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">||</span> <span class="o">!</span><span class="nx">draw</span><span class="p">){</span>
        <span class="nx">prevX</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span>
        <span class="nx">prevY</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span>
        <span class="k">return</span>
    <span class="p">}</span>

    <span class="kd">let</span> <span class="nx">currentX</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span>
    <span class="kd">let</span> <span class="nx">currentY</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span>

    <span class="nx">ctx</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">()</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">moveTo</span><span class="p">(</span><span class="nx">prevX</span><span class="p">,</span> <span class="nx">prevY</span><span class="p">)</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="nx">currentX</span><span class="p">,</span> <span class="nx">currentY</span><span class="p">)</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">stroke</span><span class="p">()</span>

    <span class="nx">prevX</span> <span class="o">=</span> <span class="nx">currentX</span>
    <span class="nx">prevY</span> <span class="o">=</span> <span class="nx">currentY</span>
<span class="p">})</span></code></pre>
<p>OK，我们已经成功完成了。</p><p>The post <a href="https://www.linuxmi.com/html5-js-drawing-app.html">HTML5教程：让我们用JS创建一个绘图APP</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.linuxmi.com/html5-js-drawing-app.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>使用开源脚本在不受支持的硬件上轻松安装 Windows 11</title>
		<link>https://www.linuxmi.com/install-windows-11-on-unsupported-devices.html?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=install-windows-11-on-unsupported-devices</link>
					<comments>https://www.linuxmi.com/install-windows-11-on-unsupported-devices.html#respond</comments>
		
		<dc:creator><![CDATA[linuxmi]]></dc:creator>
		<pubDate>Sat, 02 Oct 2021 23:22:56 +0000</pubDate>
				<category><![CDATA[其他]]></category>
		<category><![CDATA[资讯]]></category>
		<category><![CDATA[Windows 11]]></category>
		<guid isPermaLink="false">https://www.linuxmi.com/?p=9865</guid>

					<description><![CDATA[<p>Windows 11 是今年科技领域最大的热点之一。 该操作系统引发了许多炒作，发布非常出乎意料，因 &#8230;</p>
<p>The post <a href="https://www.linuxmi.com/install-windows-11-on-unsupported-devices.html">使用开源脚本在不受支持的硬件上轻松安装 Windows 11</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>Windows 11 是今年科技领域最大的热点之一。 该操作系统引发了许多炒作，发布非常出乎意料，因为微软表示 WINdows10 将是最后一个 Windows 版本。 然而，Windows 11 还是来了。</p>
<p>Windows 11 的主要问题之一是微软计划停止支持第 7 代Intel处理器及以下和第 2 代锐龙处理器及以下。原本Windows 11仅支持Intel第八代以上与AMD Ryzen 3000以上的处理器，对此引此用户的争议，不过微软在官方博客中提出解释与澄清，特别指出Intel第六代处理器与AMD Zen以外的处理器因为不符合Windows 11安全性、稳定性与可靠性的最低要求而不能升级至Windows 11，所以夹在中间的Intel第七代和AMD Zen 1都还有机会能够向上升级。但是，这些硬件限制并没有阻止人们尝试在不受支持的硬件上运行 Windows 11。</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-9878" src="https://www.linuxmi.com/wp-content/uploads/2021/10/Windows11-0_1.png" alt="" width="1920" height="1080" /></p>
<p>我们已经写了有关如何安装 Windows 11 的指南，但它们需要有点技术性。 我们将要讨论的最新方法是所有方法中最简单的。</p>
<p><strong>在不受支持的设备上安装 Windows 11</strong></p>
<p>本指南分为两部分：运行几个脚本来绕过 TPM 2.0 要求，第二部分是安装 Windows 11。让我们开始吧。</p>
<p>1、前往<a href="https://gist.github.com/AveYo/c74dc774a8fb81a332b5d65613187b15/archive/6331dc4ff5fdef511538a235fc60f9012c60d1f0.zip" target="_blank" rel="nofollow noopener">官方存储库</a>，下载 zip 文件并解压。</p>
<p>2、现在，双击 Skip_TPM_Check_on_Dynamic_Update.cmd 文件，让它发挥作用。 （包括更改注册表项并删除 appraiserres.dll 文件。）</p>
<ul>
<li>在HKEY_LOCAL_MACHINE\SYSTEM\Setup\MoSetup注册表项下创建“ AllowUpgradesWithUnsupportedTPMOrCPU ”值并将其设置为 1。</li>
<li id="0A52B5C0">注册名为“Skip TPM Check on Dynamic Update”的 WMI 事件订阅，该订阅会删除“ C:\$WINDOWS.~BT\appraiserres.dll ”文件，当订阅会在 Windows 11 安装期间启动 vdsldr.exe 可执行 appraiserres.dll。</li>
</ul>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-9879" src="https://www.linuxmi.com/wp-content/uploads/2021/10/Windows11-0_2.png" alt="" width="1239" height="920" /></p>
<p>3、完成后，退出并双击Media Creation Tool bat文件。</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-9874" src="https://www.linuxmi.com/wp-content/uploads/2021/10/Windows11-2.png" alt="" width="1233" height="676" /></p>
<p>4、点击“11”，点击<strong>Auto Setup</strong>。 这将启动媒体创建工具，并开始下载和安装 Windows 11。</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-9875" src="https://www.linuxmi.com/wp-content/uploads/2021/10/Windows11-3.png" alt="" width="1235" height="676" /></p>
<p>5、在您的计算机启动到 Windows 之前等待至少一个小时，好了！ 您已安装 Windows 11！</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-9882" src="https://www.linuxmi.com/wp-content/uploads/2021/10/windows11-tpm.png" alt="" width="1920" height="1080" /></p>
<p>需要注意的是，创建的 WMI 事件订阅将一直有效，直到用户再次运行 Skip_TPM_Check_on_Dynamic_Update.cmd 脚本，这将导致事件订阅被删除。因此，用户可以在安装或升级 Windows 11 后执行此操作。</p>
<p>你期待Windows 11 正式来临吗？您是否设法使用这种方法安装了 Windows 11？ 在下面的评论告诉我们。</p><p>The post <a href="https://www.linuxmi.com/install-windows-11-on-unsupported-devices.html">使用开源脚本在不受支持的硬件上轻松安装 Windows 11</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.linuxmi.com/install-windows-11-on-unsupported-devices.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Windows 11 虚拟桌面：你可以用它做些什么</title>
		<link>https://www.linuxmi.com/windows-11-virtual-desktops.html?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=windows-11-virtual-desktops</link>
					<comments>https://www.linuxmi.com/windows-11-virtual-desktops.html#respond</comments>
		
		<dc:creator><![CDATA[linuxmi]]></dc:creator>
		<pubDate>Sat, 11 Sep 2021 09:30:37 +0000</pubDate>
				<category><![CDATA[其他]]></category>
		<category><![CDATA[资讯]]></category>
		<category><![CDATA[Windows 11]]></category>
		<guid isPermaLink="false">https://www.linuxmi.com/?p=9452</guid>

					<description><![CDATA[<p>从Windows 11发布以来我们所看到的，很明显微软特别关注多任务处理。虚拟桌面从Windows  &#8230;</p>
<p>The post <a href="https://www.linuxmi.com/windows-11-virtual-desktops.html">Windows 11 虚拟桌面：你可以用它做些什么</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>从<a href="https://www.linuxmi.com/windows-11-xielou-fenxi.html" target="_blank" rel="noopener">Windows 11</a>发布以来我们所看到的，很明显微软特别关注多任务处理。虚拟桌面从Windows 10开始就存在了，但还没有完全安装。之前，任务视图按钮打开了时间轴和虚拟桌面屏幕。</p>
<p>在Windows 11中，任务视图提供了更好的多任务处理能力。现在让我们看看你可以用全新的虚拟桌面做些什么。</p>
<p><strong>在不同地方使用电脑的想法</strong></p>
<p>Windows 11 的虚拟桌面的创建理念是用户在不同的地方使用他们的电脑。 意思是，用户应该在家里有一个不同的工作空间，而在工作中应该有另一个工作空间。</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-9456" src="https://www.linuxmi.com/wp-content/uploads/2021/09/1-1.png" alt="" width="1688" height="475" /></p>
<p style="text-align: center;">重命名虚拟桌面</p>
<p>最初，您可以根据自己的喜好重命名虚拟桌面。 就是这样：</p>
<p>1. 将鼠标悬停在任务视图图标上。</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-9457" src="https://www.linuxmi.com/wp-content/uploads/2021/09/2-1.png" alt="" width="1601" height="360" /></p>
<p style="text-align: center;">任务视图按钮</p>
<p>2. 然后，右键单击虚拟桌面并单击重命名以根据您的喜好为其命名。</p>
<p>3. 总而言之，您可以为每个活动桌面使用不同的名称，例如工作、家庭、学校等，为您所做的一切创建一个环境。</p>
<p><strong>为单独的桌面选择不同的背景</strong></p>
<p>新添加的功能可让您为活动桌面设置不同的背景。例如，您可以为您的工作桌面使用不同的壁纸，为您的家庭桌面使用另一个壁纸。反过来，这可以导致更顺畅的多任务处理。让我们看看如何。</p>
<p>1. 将鼠标悬停在/单击“任务视图”按钮，然后右键单击所需的桌面。</p>
<p>2. 其次，选择“从上下文菜单中选择背景”选项。</p>
<p>3. 此外，Windows 将打开设置应用程序。从预先安装的背景中选择背景或使用您自己的图像。</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-9458" src="https://www.linuxmi.com/wp-content/uploads/2021/09/3-1.png" alt="" width="1343" height="851" /></p>
<p style="text-align: center;">更改桌面背景</p>
<p>注意：您还可以通过在任务视图屏幕中向左或向右移动虚拟桌面来重新排列虚拟桌面。所有这些新功能的引入都是为了最大限度地提高生产力。</p>
<p>一旦你设置了你的虚拟桌面，它就会是这样的：</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-9459" src="https://www.linuxmi.com/wp-content/uploads/2021/09/20-26-44.gif" alt="" width="1920" height="1080" /></p>
<p style="text-align: center;">任务视图选项</p>
<p>您喜欢新的 Windows 11 虚拟桌面吗？你会使用它们吗？请在下面的评论中告诉我们。</p><p>The post <a href="https://www.linuxmi.com/windows-11-virtual-desktops.html">Windows 11 虚拟桌面：你可以用它做些什么</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.linuxmi.com/windows-11-virtual-desktops.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Xorg，X11，Wayland？Linux显示服务器和协议介绍</title>
		<link>https://www.linuxmi.com/xorg-x11-wayland-linux.html?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=xorg-x11-wayland-linux</link>
					<comments>https://www.linuxmi.com/xorg-x11-wayland-linux.html#respond</comments>
		
		<dc:creator><![CDATA[linuxmi]]></dc:creator>
		<pubDate>Mon, 15 Mar 2021 12:06:20 +0000</pubDate>
				<category><![CDATA[其他]]></category>
		<category><![CDATA[Wayland]]></category>
		<category><![CDATA[X11]]></category>
		<category><![CDATA[Xorg]]></category>
		<guid isPermaLink="false">https://www.linuxmi.com/?p=5106</guid>

					<description><![CDATA[<p>您是否想知道X Server，Xorg，X11，Wayland以及诸如此类的东西到底是什么？Wayl &#8230;</p>
<p>The post <a href="https://www.linuxmi.com/xorg-x11-wayland-linux.html">Xorg，X11，Wayland？Linux显示服务器和协议介绍</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>您是否想知道X Server，Xorg，X11，Wayland以及诸如此类的东西到底是什么？Wayland vs Xorg，哪个更好？本指南就为你详细讲解。</p>
<p>您总是会遇到这些术语，并且知道它们与图形有关，但您可能想更深入了解它们。</p>
<p><strong>Linux中的显示服务器是什么？</strong></p>
<p>显示服务器是一个程序，其主要任务是协调客户端与其他操作系统，硬件以及彼此之间的输入和输出。显示服务器通过显示服务器协议与其客户端进行通信。</p>
<p>显示服务器是任何图形用户界面（尤其是窗口系统）中的关键组件。它是图形用户界面（GUI）的基本组件，位于图形界面和内核之间。因此，借助显示服务器，您可以将计算机与GUI一起使用。没有它，您将只能使用命令行界面。</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="wp-image-6098 size-full aligncenter" src="https://www.linuxmi.com/wp-content/uploads/2021/02/Ubuntu-21.04.png" alt="" width="1920" height="1200" srcset="https://www.linuxmi.com/wp-content/uploads/2021/02/Ubuntu-21.04.png 1920w, https://www.linuxmi.com/wp-content/uploads/2021/02/Ubuntu-21.04-1024x640.png 1024w" sizes="auto, (max-width: 1920px) 100vw, 1920px" /></p>
<p>不要将显示服务器与桌面环境混淆是非常重要的。桌面环境(Gnome、KDE、Xfce、MATE等)使用了底层的显示服务器。</p>
<p>比如：<strong>Ubuntu 21.04现在默认启用Wayland</strong>  <a href="https://www.linuxmi.com/ubuntu-21-04-linux-5-10-lts-wayland.html" target="_blank" rel="noopener">https://www.linuxmi.com/ubuntu-21-04-linux-5-10-lts-wayland.html</a></p>
<p>显示服务器通过显示服务器协议与其客户端进行通信。Linux中提供了三种显示服务器协议。X11和Wayland是其中两个。第三个Mir超出了本文的范围。</p>
<p><strong>X Window System, X.Org, X11介绍</strong></p>
<p>X Window System（通常仅称为X或X11）确实很古老。它最初起源于1984年，最终成为大多数类似UNIX的操作系统（包括Linux）的默认窗口系统。</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-6779" src="https://www.linuxmi.com/wp-content/uploads/2021/01/X.Org_Logo.png" alt="" width="1280" height="1025" /></p>
<p>X.Org服务器是X.Org基金会管理的X Window System显示服务器的免费开放源代码实现。它是一个通过X11协议与客户端应用程序进行交互的应用程序，用于在显示器上绘制内容并发送输入事件，例如鼠标移动，单击和击键。通常，将启动一个X服务器，它将等待客户端应用程序连接到它。Xorg基于客户端/服务器模型，因此允许客户端在另一台计算机上本地或远程运行。</p>
<p>在X11的设计中，应用程序和显示器不必在同一台计算机上，这一点并不明显。在开发X时，X server运行在工作站上，而用户在具有更强处理能力的远程计算机上运行应用程序是很常见的。</p>
<p>X11 是网络协议。它描述了如何在客户端（应用程序）和显示器（服务器）之间交换消息。这些消息通常带有原始的绘制命令，例如“绘制框”，“在此位置写这些字符”，“已单击鼠标左键”等。</p>
<p>但是X11已经很古老了，X server协议提供的大部分功能不再使用。X11所做的几乎所有工作都重新分配给了各个应用程序和窗口管理器。然而，所有这些旧特性仍然存在，给所有这些应用程序带来了压力，损害了性能和安全性。</p>
<p><strong>下一代显示服务器Wayland</strong></p>
<p>Wayland 由X.Org开发人员Kristian Hogsberg于2008年作为个人项目开始。它是一种通信协议 ，用于指定显示服务器与其客户端之间的通信。Wayland是作为一个免费的开源社区驱动的项目而开发的，目的是用现代，安全和简单的窗口系统代替X Window System（也称为X11或Xorg）。</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-6780" src="https://www.linuxmi.com/wp-content/uploads/2021/03/wayland.png" alt="" width="920" height="400" /></p>
<p>在Wayland中，合成器是显示服务器。Compositor是一个窗口管理器，它为应用程序提供每个窗口的屏幕外缓冲区。窗口管理器将窗口缓冲区合成为代表屏幕的图像，并将结果写入显示内存。</p>
<p>Wayland协议允许合成器将输入事件直接发送到客户端，并让客户端将损坏事件直接发送到合成器。</p>
<p>与X情况一样，客户端在接收到事件时会作为响应更新用户界面（UI）。但是，在Wayland中，渲染发生在客户端中，并且客户端只是向合成器发送请求以指示已更新的区域。</p>
<p>Wayland与X相比的主要优势在于它是从头开始的。X的复杂性的主要原因之一是，多年来，它的作用已经改变。结果，今天，X11很大程度上充当了客户端和窗口管理器之间的“一个非常糟糕的”通信协议。</p>
<p>Wayland在安全性方面也很出色。使用X11，可以通过允许任何程序在后台存在并读取X11区域中打开的其他窗口所发生的事情来执行称为“键盘记录”的操作。使用Wayland，这根本不会发生，因为每个程序都是独立工作的。</p>
<p><strong>总结</strong></p>
<p>但是，与Wayland相比，X Window System仍具有许多优势。即使Wayland消除了Xorg的大多数设计缺陷，它也有其自身的问题。即使Wayland项目已经进行了十多年，事情还是不是100％稳定的。截至2020年，大多数用于Linux的视频游戏和图形密集型应用程序仍为X11编写。另外，许多封闭源代码的图形驱动程序，例如NVIDIA GPU的驱动程序，都尚未完全提供对Wayland的支持。</p>
<p>X不能持久，Wayland在许多方面都可以改善。但是到目前为止，现有的绝大多数本机应用程序都是为Xorg编写的。在移植所有这些应用程序之前，需要维护Xorg。与Xorg相比，Wayland还不是很稳定。</p><p>The post <a href="https://www.linuxmi.com/xorg-x11-wayland-linux.html">Xorg，X11，Wayland？Linux显示服务器和协议介绍</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.linuxmi.com/xorg-x11-wayland-linux.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>2021年最值得学习的5种编程语言</title>
		<link>https://www.linuxmi.com/5-biancheng-2021.html?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=5-biancheng-2021</link>
					<comments>https://www.linuxmi.com/5-biancheng-2021.html#respond</comments>
		
		<dc:creator><![CDATA[linuxmi]]></dc:creator>
		<pubDate>Mon, 01 Mar 2021 00:27:17 +0000</pubDate>
				<category><![CDATA[其他]]></category>
		<guid isPermaLink="false">https://www.linuxmi.com/?p=5715</guid>

					<description><![CDATA[<p>如果您是编程新手，不知道从哪里开始，这篇文章正好适合您。今天有超过100种编程语言(谷歌说超过700 &#8230;</p>
<p>The post <a href="https://www.linuxmi.com/5-biancheng-2021.html">2021年最值得学习的5种编程语言</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>如果您是编程新手，不知道从哪里开始，这篇文章正好适合您。今天有超过100种编程语言(谷歌说超过700种)，所以有很多选择。</p>
<p>选择第一种语言很重要，因为它建立了您对编码世界的基础和理解。老实说，选择哪种编程语言并不重要，你需要掌握它，提高你的问题解决和开发技能，然后从一种语言切换到另一种语言就变得很简单了。</p>
<p>在本文中，我将为您提供5种软件行业中是必不可少的编程语言，高薪的技能和他们的优势，缺点，以及它们使用的领域。但在此之前，了解编程语言的类型是很重要的。</p>
<p><strong>编程语言的类型:</strong></p>
<p>有四种主要的编程语言:</p>
<ol>
<li>过程式编程语言：从上到下执行一系列语句或过程。</li>
<li>函数式编程语言：函数用于存储数据、重复任务和返回输出。</li>
<li>面向对象编程语言：最常用的语言，因为它接近于真实世界的模型，其中每个实体都是一个对象，并通过继承等概念实现了可重用性和冗余性。</li>
<li>脚本编程语言：它们不是成熟的语言，由支持应用程序的小型编程元素组成。</li>
</ol>
<p>所以，让我们看看2021年你应该学习的前五种编程语言是什么。你可以在<a href="https://insights.stackoverflow.com/survey/2020#most-popular-technologies" target="_blank" rel="noopener">这里</a>查看统计数据。</p>
<p><strong>1、Python</strong></p>
<p>Python是一种快速发展且流行的编程语言。如果您是编程的初学者，我强烈建议您学习Python，因为它易于学习并且使开发人员的生活变得轻松。</p>
<p>Python可用于Web和桌面应用程序，基于GUI的桌面应用程序，机器学习，数据科学和网络服务器。它是数据科学领域中最流行的语言。</p>
<p>它的社区支持度很高，并带有各种开放源代码框架和库。例如：Django，Flask，Keras，Tensorflow。 与 Java、C#、Go、JavaScript、C++ 等其他语言相比，Python 是最慢的语言之一。</p>
<p><strong>2、JavaScript</strong></p>
<p>JavaScript是适合在Web和移动设备上工作的开发人员的最佳编程语言，而且根据Stack Overflow的调查，它是2020年最流行的编程语言。它是软件行业中最常用的语言，尤其是对初创企业和高技能人才的需求。</p>
<p>具有React，Node，Angular，Vue和Electron等框架的JavaScript已成为一种强大的语言，可用于为Web，移动和桌面应用程序编码。它为您提供了全栈技能。</p>
<p>JavaScript也是一种难以理解的语言，因为它不同于Python和Java语言，因为它是带有异步代码的单线程语言。</p>
<p><strong>3、Java</strong></p>
<p>Java是业界最常用的编程语言之一，其唯一原因是Java快速，健壮，兼容并且是最佳的面向对象编程语言。</p>
<p>它主要用于J2EE和Spring等框架的后端开发。除Web之外，它还用于Android开发和桌面应用程序。</p>
<p>它得到了社区的大力支持，并且在这个行业已经存在了很长时间。我要说的唯一缺点是，它不容易学习，并且增长速度不如Python或JavaScript。</p>
<p><strong>4、C#</strong></p>
<p>C-Sharp是由微软开发的，在.NET Framework上运行的现代编程语言。 它用于开发移动，Web和桌面应用程序，并且由于其在大规模分布式系统中的可伸缩性而被广泛使用。</p>
<p>它是面向对象的，类型安全，在使用Unity开发游戏应用程序中最受欢迎。</p>
<p>5、Go</p>
<p>由Google开发的Go是另一种广泛流行的现代编程语言。 它是一种新的编程语言，用途有限。</p>
<p>Go是专门为系统和基础结构程序员创建的。 它主要用于后端以及云和DevOps。</p>
<p>希望您对不同编程语言的优缺点有所了解。 选择一种编程语言完全取决于您和您的使用方式，例如后端开发或前端以及移动应用程序等。</p>
<p>感谢您阅读到最后，希望本文对您的准备工作有所帮助。</p>
<p>参考文献：</p>
<p>https://insights.stackoverflow.com/survey/2020#most-popular-technologies<br />
https://www.computer.org/publications/tech-news/trends/programming-languages-you-should-learn-in-2020</p><p>The post <a href="https://www.linuxmi.com/5-biancheng-2021.html">2021年最值得学习的5种编程语言</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.linuxmi.com/5-biancheng-2021.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Windows 10 实现任务栏半透明或全透明</title>
		<link>https://www.linuxmi.com/windows-10-translucenttb.html?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=windows-10-translucenttb</link>
					<comments>https://www.linuxmi.com/windows-10-translucenttb.html#respond</comments>
		
		<dc:creator><![CDATA[linuxmi]]></dc:creator>
		<pubDate>Sat, 06 Feb 2021 13:29:49 +0000</pubDate>
				<category><![CDATA[其他]]></category>
		<category><![CDATA[TranslucentTB]]></category>
		<guid isPermaLink="false">https://www.linuxmi.com/?p=5601</guid>

					<description><![CDATA[<p>从一开始，Microsoft就允许根据用户需要自定义Windows 10。这样的话，可以通过多种方式 &#8230;</p>
<p>The post <a href="https://www.linuxmi.com/windows-10-translucenttb.html">Windows 10 实现任务栏半透明或全透明</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>从一开始，Microsoft就允许根据用户需要自定义Windows 10。这样的话，可以通过多种方式自定义任务栏，包括更改颜色和使其变得透明。 但是Windows 10不允许拥有完整的半透明任务栏。 因此，ethanhs创建了一个微型程序，该程序可以使Windows 10 任务栏半透明，或者100％全透明。</p>
<p>让我们看看如何使Windows 10任务栏看起来非常光滑透明，如下图所示。</p>
<p style="text-align: center;"><a href="https://www.linuxmi.com/wp-content/uploads/2021/02/2021-02-06_212859.png"><img loading="lazy" decoding="async" class="alignnone wp-image-5663 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/02/2021-02-06_212859-1024x640.png" alt="" width="731" height="457" /></a></p>
<p style="text-align: center;">Windows 10透明任务栏(20H2)</p>
<p>如您所见，我的Windows 10任务栏没有Cortana搜索栏，它实际上是图标而不是搜索栏。 它不会使搜索栏透明，因此一个好的做法是通过右键单击任务栏并选择搜索&gt;显示搜索图标或隐藏来隐藏搜索栏。</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-5660 size-full" src="https://www.linuxmi.com/wp-content/uploads/2021/02/TranslucentTB-2.png" alt="" width="1506" height="314" srcset="https://www.linuxmi.com/wp-content/uploads/2021/02/TranslucentTB-2.png 1506w, https://www.linuxmi.com/wp-content/uploads/2021/02/TranslucentTB-2-1024x214.png 1024w" sizes="auto, (max-width: 1506px) 100vw, 1506px" /></p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="aligncenter wp-image-5659 size-full" src="https://www.linuxmi.com/wp-content/uploads/2021/02/TranslucentTB-1.png" alt="" width="1389" height="1494" srcset="https://www.linuxmi.com/wp-content/uploads/2021/02/TranslucentTB-1.png 1389w, https://www.linuxmi.com/wp-content/uploads/2021/02/TranslucentTB-1-952x1024.png 952w" sizes="auto, (max-width: 1389px) 100vw, 1389px" /></p>
<p><strong>使任务栏完全透明</strong></p>
<p>您需要下载并运行TranslucentTB程序，下面给出了链接。任务栏立刻变得透明，相信我，它看起来很神奇。 并不是所有的墙纸看起来都那么好，所以你要设置一个合适的墙纸，使其与半透明的任务栏结合一起。</p>
<p>该程序的图标保留在通知区域中，右键单击，您可以进一步自定义任务栏外观。 当您在桌面上时，默认设置是透明的；打开某些内容时，默认设置是正常的。</p>
<p>任务栏状态，自定义任务栏的外观，下面是对任务栏状态的描述。</p>
<p>模糊：使任务栏略微模糊。<br />
透明：透明任务栏。<br />
亚克力：半透明<br />
正常：常规Windows风格。 （与TranslucentTB未运行相同）<br />
不透明：无透明度。</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="alignnone wp-image-5661 size-full" src="https://www.linuxmi.com/wp-content/uploads/2021/02/TranslucentTB-3.png" alt="" width="797" height="662" /></p>
<p>现在，您可以在桌面上的“常规”下获得自定义Windows 10任务栏的选项。 打开程序时，请从“最大化窗口”管理任务栏行为。 其余选项管理开始菜单，高级和时间线。</p>
<p><strong>如何停止/还原TranslucentTB？</strong></p>
<p>选项1、打开任务管理器并查找“ TranslucentTB.exe（32位）”，然后结束任务。 之后，任务栏保持不变，因此您必须按“开始”按钮或单击“开始”图标。 它应该还原为旧的任务栏设置。</p>
<p>选项2、右键单击任务栏上的程序图标，然后选择退出，您的任务栏设置应更改回Windows正常状态。</p>
<p><strong>如何使任务栏永久透明</strong></p>
<p>如果您从GitHub存储库中获得了该程序，请按照以下步骤操作，Windows商店版本不需要此方法即可通过Windows自动启动。</p>
<p>将程序复制到“启动”文件夹中，该文件夹位于以下地址。</p>
<p>C:\Users\USERNAME\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup</p>
<p>另外，您可以通过Win + R快速进入启动文件夹，然后键入“shell:startup”回车。 您可以在任务栏&gt;启动中查看该程序； 从那里，您可以对其进行管理。</p>
<p>在没有<strong>TranslucentTB</strong>之前，人们发现了改动注册表编辑器可以使任务栏更加透明，但是这些更改看起来任务栏不是100％透明或半透明。 感谢ethanhs创建了这个小应用程序，以使Windows 10任务栏看起来非常令人惊奇。</p>
<p>TranslucentTB（半透明任务栏）<a href="https://www.microsoft.com/zh-cn/p/translucenttb/9pf4kz2vn4w9#activetab=pivot:overviewtab" target="_blank" rel="nofollow noopener">@Microsoft Store</a> | <a href="https://github.com/TranslucentTB/TranslucentTB" target="_blank" rel="noreferrer noopener nofollow">Github 仓库地址</a>。</p><p>The post <a href="https://www.linuxmi.com/windows-10-translucenttb.html">Windows 10 实现任务栏半透明或全透明</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.linuxmi.com/windows-10-translucenttb.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>duf：一款高逼格Linux磁盘信息查看工具</title>
		<link>https://www.linuxmi.com/duf-linux.html?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=duf-linux</link>
					<comments>https://www.linuxmi.com/duf-linux.html#respond</comments>
		
		<dc:creator><![CDATA[linuxmi]]></dc:creator>
		<pubDate>Sat, 06 Feb 2021 09:16:25 +0000</pubDate>
				<category><![CDATA[其他]]></category>
		<guid isPermaLink="false">https://www.linuxmi.com/?p=5644</guid>

					<description><![CDATA[<p>可以使用df命令来显示在Linux、macOS和类Unix系统中挂载的文件系统上有多少可用磁盘空间。 &#8230;</p>
<p>The post <a href="https://www.linuxmi.com/duf-linux.html">duf：一款高逼格Linux磁盘信息查看工具</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>可以使用df命令来显示在Linux、macOS和类Unix系统中挂载的文件系统上有多少可用磁盘空间。还可以使用du命令来估计文件空间的使用情况。我们现在有了另一个奇特的工具，名为duf，是一款golang编写的磁盘信息查看工具，它可以显示Unix、Linux、macOS、*BSD、Android和Windows中可用磁盘空间的统计信息。</p>
<p>duf是 Disk Usage/Free 缩写。 它适用于Linux和类似Unix的系统，包括Windows。 它具有以下功能：</p>
<ul>
<li>易于使用</li>
<li>彩色显示</li>
<li>根据终端调整大小的高度调整高度和宽度</li>
<li>根据需要对数据进行排序</li>
<li>过滤器和组</li>
<li>JSON输出等</li>
</ul>
<p><strong>安装duf</strong></p>
<p>确保您具有可运行的Go环境，包括已安装用于源代码安装的Golang编译器。 打开终端应用程序，然后使用git命令：</p>
<p>git clone https://github.com/muesli/duf.git<br />
cd duf<br />
go build</p>
<p><strong>如何在Debian / Ubuntu Linux上安装duf（预构建软件包）</strong></p>
<p>使用wget命令或curl命令下载文件：</p>
<p>linuxmi@linuxmi:~/www.linuxmi.com$ <span style="color: #ff0000;">wget https://github.com/muesli/duf/releases/download/v0.5.0/checksums.txt</span><br />
linuxmi@linuxmi:~/www.linuxmi.com$ <span style="color: #ff0000;">wget https://github.com/muesli/duf/releases/download/v0.5.0/duf_0.5.0_linux_amd64.deb</span><br />
linuxmi@linuxmi:~/www.linuxmi.com$ <span style="color: #ff0000;">sha256sum &#8211;ignore-missing -c checksums.txt</span></p>
<p><a href="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-1.png"><img loading="lazy" decoding="async" class="alignnone wp-image-5653 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-1-1024x299.png" alt="" width="731" height="213" srcset="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-1-1024x299.png 1024w, https://www.linuxmi.com/wp-content/uploads/2021/02/duf-1.png 1840w" sizes="auto, (max-width: 731px) 100vw, 731px" /></a></p>
<p>校验和确认：</p>
<p>duf_0.5.0_linux_amd64.deb: OK</p>
<p>在您的Debian或Ubuntu上安装.deb软件包：</p>
<p>linuxmi@linuxmi:~/www.linuxmi.com$ <span style="color: #ff0000;">sudo dpkg -i duf_0.5.0_linux_amd64.deb</span></p>
<p><a href="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-2.png"><img loading="lazy" decoding="async" class="alignnone wp-image-5654 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-2-1024x206.png" alt="" width="731" height="147" srcset="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-2-1024x206.png 1024w, https://www.linuxmi.com/wp-content/uploads/2021/02/duf-2.png 1840w" sizes="auto, (max-width: 731px) 100vw, 731px" /></a></p>
<p><strong>在CentOS/RHEL/Fedora/OpenSUSE Linux上安装RPM文件</strong></p>
<p>尝试使用以下命令来安装rpm文件：</p>
<p>wget https://github.com/muesli/duf/releases/download/v0.5.0/duf_0.5.0_linux_amd64.rpm<br />
wget https://github.com/muesli/duf/releases/download/v0.5.0/checksums.txt<br />
sha256sum &#8211;ignore-missing -c checksums.txt<br />
rpm -ivh duf_0.5.0_linux_amd64.rpm</p>
<p><strong>Arch Linux 中使用AUR 安装 duf</strong></p>
<p>克隆仓库并安装它：</p>
<p># 准备好AUR<br />
# sudo pacman -S &#8211;needed base-devel<br />
git clone https://aur.archlinux.org/duf.git<br />
cd duf<br />
less PKGBUILD<br />
makepkg -si</p>
<p><strong>使用termux的Android用户</strong></p>
<p>运行：</p>
<p>pkg install duf</p>
<p><strong>macOS Unix安装duf</strong></p>
<p>首先，在macOS上安装Homebrew，然后键入以下brew命令：</p>
<p>brew install duf</p>
<p>或使用port命令</p>
<p>sudo port selfupdate &amp;&amp; sudo port install duf</p>
<p><strong>FreeBSD安装duf</strong></p>
<p>执行pkg命令</p>
<p>sudo sh -c &#8216;pkg update &amp;&amp; pkg upgrade &amp;&amp; pkg install duf&#8217;</p>
<p>微软Windows使用scoop安装duf</p>
<p>在DOS/Windows提示符下键入：</p>
<p>scoop install duf</p>
<p><strong>如何使用duf？</strong></p>
<p>使用duf查看磁盘空间使用情况很简单，您只需键入：</p>
<p>linuxmi@linuxmi:~/www.linuxmi.com$ <span style="color: #ff0000;">duf</span></p>
<p>如下图：</p>
<p><a href="https://www.linuxmi.com/wp-content/uploads/2021/02/duf.png"><img loading="lazy" decoding="async" class="alignnone wp-image-5647 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-1024x640.png" alt="" width="731" height="457" /></a></p>
<p>点击上图看大图，正如你在上面的输出中看到的，duf以一种很好的表格列格式列出了以下细节:</p>
<ul>
<li>总的挂载设备数，</li>
<li>挂载点，</li>
<li>根分区的总大小</li>
<li>使用和空闲磁盘空间的总大小</li>
<li>磁盘使用总量的百分比</li>
<li>文件系统类型</li>
<li>文件系统名称等</li>
</ul>
<p>我们可以强制duf列出特定的设备和挂载点：</p>
<p>linuxmi@linuxmi:~/www.linuxmi.com$ <span style="color: #ff0000;">duf /home</span></p>
<p><a href="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-3.png"><img loading="lazy" decoding="async" class="alignnone wp-image-5651 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-3-1024x255.png" alt="" width="731" height="182" /></a></p>
<p>linuxmi@linuxmi:~/www.linuxmi.com$ <span style="color: #ff0000;">duf /home/linuxmi</span></p>
<p><a href="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-4.png"><img loading="lazy" decoding="async" class="alignnone wp-image-5652 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-4-1024x288.png" alt="" width="731" height="206" /></a></p>
<p>让我们显示所有文件系统，包括伪文件系统、重复文件系统和不可访问文件系统：</p>
<p>请运行：</p>
<p>linuxmi@linuxmi:~/www.linuxmi.com$ <span style="color: #ff0000;">duf &#8211;all</span></p>
<p>如下：</p>
<p><a href="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-all.png"><img loading="lazy" decoding="async" class="alignnone wp-image-5649 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-all-1024x640.png" alt="" width="731" height="457" /></a></p>
<p><strong>排序输出</strong></p>
<p>语法为：</p>
<p>duf &#8211;sort {keyword}<br />
duf &#8211;sort size<br />
duf &#8211;sort used</p>
<p>有效的关键字是：mountpoint, size, used, avail, usage, inodes, inodes_used, inodes_avail, inodes_usage, type 和 filesystem。</p>
<p>我们还可以如下显示或隐藏特定的列：</p>
<p>duf &#8211;output {keyword}<br />
duf &#8211;output mountpoint,size,usage</p>
<p><strong>比如显示inode详细信息</strong></p>
<p>如果你想列出inode信息而不是块的使用情况，运行这个命令:</p>
<p>linuxmi@linuxmi:~/www.linuxmi.com$ duf &#8211;inodes</p>
<p><a href="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-inodes.png"><img loading="lazy" decoding="async" class="alignnone wp-image-5648 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-inodes-1024x640.png" alt="" width="731" height="457" /></a></p>
<p><strong>dark 与 light 主题</strong></p>
<p>我们可以设置颜色或主题。 值为：</p>
<p>duf -theme dark<br />
duf &#8211;theme light</p>
<p>以JSON格式显示磁盘使用</p>
<p>我们可以使用JSON格式显示输出，而不是使用表格列格式显示输出。</p>
<p>那么请运行:</p>
<p>linuxmi@linuxmi:~/www.linuxmi.com$ <span style="color: #ff0000;">duf &#8211;json</span></p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-5650 size-full" src="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-5.png" alt="" width="1392" height="1318" srcset="https://www.linuxmi.com/wp-content/uploads/2021/02/duf-5.png 1392w, https://www.linuxmi.com/wp-content/uploads/2021/02/duf-5-1024x970.png 1024w" sizes="auto, (max-width: 1392px) 100vw, 1392px" /></p>
<p><strong>总结</strong></p>
<p>总体而言，duf是一个出色的小型命令行实用程序。 非常适合个人Linux桌面，macOS或开发服务器。 但是，我不会将其安装在生产服务器上。 请检查<a href="https://github.com/muesli/duf" target="_blank" rel="noopener">项目主页</a>。 如果您有任何疑问或其他类似的CLI优点，请在下面的评论部分中告诉我。</p><p>The post <a href="https://www.linuxmi.com/duf-linux.html">duf：一款高逼格Linux磁盘信息查看工具</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.linuxmi.com/duf-linux.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>为什么Visual Studio Code如此受欢迎？</title>
		<link>https://www.linuxmi.com/visual-studio-code-huanying.html?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=visual-studio-code-huanying</link>
					<comments>https://www.linuxmi.com/visual-studio-code-huanying.html#respond</comments>
		
		<dc:creator><![CDATA[linuxmi]]></dc:creator>
		<pubDate>Sun, 24 Jan 2021 01:05:54 +0000</pubDate>
				<category><![CDATA[其他]]></category>
		<guid isPermaLink="false">https://www.linuxmi.com/?p=5364</guid>

					<description><![CDATA[<p>对于大多数程序员来说，好的文本编辑器是非常重要的，因为它可以使他们更快、更高效。许多人将文本编辑器与 &#8230;</p>
<p>The post <a href="https://www.linuxmi.com/visual-studio-code-huanying.html">为什么Visual Studio Code如此受欢迎？</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>对于大多数程序员来说，好的文本编辑器是非常重要的，因为它可以使他们更快、更高效。许多人将文本编辑器与IDE混淆，然而，两者之间存在着某些区别。IDE为程序员提供了一个完整的环境，以提高他们的工作效率。它主要由源代码编辑器、编译器和调试器以及大量其他特性组成。与此相反，编辑器提供的功能较少，缺少在同一屋檐下运行、测试和调试代码的环境。但是，尽管功能更少，这些编辑器是轻量级的，需要的内存更少，一些编辑器，如Visual Studio Code或Sublime Text，具有类似于IDE的附加功能。</p>
<p><strong>关于Visual Studio Code</strong></p>
<p>Visual Studio Cod（简称VS Code或VSC）是程序员使用的最受欢迎的源代码编辑器之一。它速度快，轻量级且功能强大！微软将VSC设计为用于编写Web和云应用程序的跨平台代码编辑器。微软于2015年4月29日在旧金山举行的2015 开发者大会上首次宣布了它。几个月后的2015年11月18日，VSC在MIT许可下发布，源代码在GitHub上可用。2016年4月14日，VSC在网络上发布。</p>
<p style="text-align: center;"><a href="https://www.linuxmi.com/wp-content/uploads/2021/01/vsc11.png"><img loading="lazy" decoding="async" class="alignnone wp-image-5388 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/01/vsc11-1024x576.png" alt="" width="731" height="411" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/vsc11-1024x576.png 1024w, https://www.linuxmi.com/wp-content/uploads/2021/01/vsc11.png 1920w" sizes="auto, (max-width: 731px) 100vw, 731px" /></a></p>
<p><strong>了解Visual Studio Code</strong></p>
<p>它是为Windows，Linux和macOS开发的源代码编辑器。此外，VSC还结合了编辑器的简单性和强大的开发人员工具，例如调试，嵌入式Git控件，语法高亮显示等。它是免费和开源的，并且基于用于部署Node.js应用程序的Electron框架。尽管它使用Electron框架，但它不使用Atom，而是使用Azure DevOps中使用的称为Monaco的编辑器组件。</p>
<p><strong>Visual Studio Code与Visual Studio 2019有何不同？</strong></p>
<p>VSC通常与完全不同的产品Visual Studio 2019相混淆。要区分这两种产品：</p>
<ul>
<li>VSC是源代码编辑器，而Visual Studio是完整的IDE。</li>
<li>Visual Studio Code是一个跨平台，可在Windows，Linux和macOS上运行，而Visual Studio仅在Windows和macOS上运行。</li>
<li>VSC既快速又轻巧，而Visual Studio 2019却不如以前那么快，但包含许多功能。</li>
<li>VSC主要由前端开发人员使用，Visual Studio用于任何类型的开发人员。</li>
<li>Visual Studio代码基于文件和文件夹，而Visual Studio 2015基于项目和解决方案。</li>
<li>在支持编程语言方面，两者也有所不同。由于VSC可用于编写多种语言，如PHP，Python，HTML5，JavaScript等，而Visual Studio主要用于.NET，但也支持其他一些语言。</li>
</ul>
<p><strong>为什么Visual Studio Code如此受欢迎？</strong></p>
<p>据我所知，VSC如此受欢迎的主要原因是它具备了所有程序员所期望的任何代码编辑器所具有的所有功能，并具有一些其他有用的功能。它的轻量级、快速、开源和跨平台特性以及其他很酷的特性使它比其他任何编辑器都更具优势。以下是它在开发者社区中如此受欢迎的10个原因。</p>
<p>1、跨平台</p>
<p>它是免费的，开放源代码和跨平台的编辑器，可在Windows，Linux和macOS上运行，因此无论您的设备所基于的平台如何，您都可以工作。</p>
<p>2、支持多种编程语言</p>
<p>当您访问Visual Studio Code网站时，您很快就会意识到它支持几乎所有主要的编程语言。它支持Python，JavaScript，HTML，CSS，TypeScript，C++，Java，PHP，Go，C#，PHP，SQL，Ruby，Objective-C等。</p>
<p>相关：</p>
<blockquote class="wp-embedded-content" data-secret="osWntDugpX"><p><a href="https://www.linuxmi.com/ubuntu-visual-studio-code-c.html">Ubuntu 上配置 Visual Studio Code 编译和运行C/C++</a></p></blockquote>
<p><iframe loading="lazy" class="wp-embedded-content" sandbox="allow-scripts" security="restricted"  title="《 Ubuntu 上配置 Visual Studio Code 编译和运行C/C++ 》—Linux迷" src="https://www.linuxmi.com/ubuntu-visual-studio-code-c.html/embed#?secret=g47YLocZR9#?secret=osWntDugpX" data-secret="osWntDugpX" width="357" height="201" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<p>3、您可以更改所选文件的语言</p>
<p>它支持默认语言，具体取决于您的文件，但您也可以更改语言模式。为此，请单击状态栏右侧的语言指示器，这将打开“更改语言模式”下拉菜单。在这里，您可以为当前文件选择不同的语言。</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="alignnone wp-image-5387 size-full" src="https://www.linuxmi.com/wp-content/uploads/2021/01/vsc4.png" alt="" width="1037" height="691" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/vsc4.png 1037w, https://www.linuxmi.com/wp-content/uploads/2021/01/vsc4-1024x682.png 1024w" sizes="auto, (max-width: 1037px) 100vw, 1037px" /></p>
<p>4、提供特定语言的文档</p>
<p>它的网站包含特定于Visual Studio Code支持的通用语言的文档。其中一些是C++，C#，CSS，Go，Python，PHP，Java等。</p>
<p>5、调试</p>
<p>VSC带有内置调试器，这也是其主要功能之一。它有助于加速任何程序员的编辑，编译和调试循环。但是，默认情况下，它仅带有支持NodeJS的调试器，该调试器可以调试任何转译为JavaScript的内容，但同样，您可以将扩展名用于其他运行时。</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="alignnone wp-image-5385 size-full" src="https://www.linuxmi.com/wp-content/uploads/2021/01/vsc1.png" alt="" width="1037" height="691" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/vsc1.png 1037w, https://www.linuxmi.com/wp-content/uploads/2021/01/vsc1-1024x682.png 1024w" sizes="auto, (max-width: 1037px) 100vw, 1037px" /></p>
<p>6、内置Git集成</p>
<p>Visual Studio Code通过提供完整的Git集成使程序员更进一步，使程序员无需离开编辑器即可立即查看更改。您可以在侧栏的左侧找到Git图标，在其中可以对其进行初始化，并可以执行若干Git命令，例如pull，push，publish和其他命令。此外，VSC还可以与多个Git存储库一起使用，无论是本地的还是远程的。</p>
<p>7、智能感知</p>
<p>程序员使用此功能来实现智能代码完成，参数信息，内容辅助，快速信息和代码提示。VSC为JavaScript，CSS，HTML，TypeScript，JSON，Sass和Less编程语言提供了IntelliSense。对于其他语言，我们可以通过添加其扩展名来使用IntelliSense。</p>
<p>8、命令面板</p>
<p>按下Ctrl + Shift + P 命令会显示命令面板，使您可以从键盘访问VS Code。它允许您访问VS Code的所有功能，包括所有关键字快捷方式。此外，此选板还允许访问许多命令。</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="alignnone wp-image-5384 size-full" src="https://www.linuxmi.com/wp-content/uploads/2021/01/vsc.png" alt="" width="1037" height="691" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/vsc.png 1037w, https://www.linuxmi.com/wp-content/uploads/2021/01/vsc-1024x682.png 1024w" sizes="auto, (max-width: 1037px) 100vw, 1037px" /></p>
<p>9、代码管理功能</p>
<p>Visual Studio代码还提供了代码管理功能，例如转到定义，查看定义，查找所有引用并重命名符号。通过右键单击代码文件，可以在VSC中轻松找到这些功能。</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="alignnone wp-image-5386 size-full" src="https://www.linuxmi.com/wp-content/uploads/2021/01/vsc2.png" alt="" width="1037" height="691" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/vsc2.png 1037w, https://www.linuxmi.com/wp-content/uploads/2021/01/vsc2-1024x682.png 1024w" sizes="auto, (max-width: 1037px) 100vw, 1037px" /></p>
<p>10、定制</p>
<p>与其他流行的编辑器一样，Visual Studio Code也提供自定义功能。实际上，由于其灵活的首选项设置和大量扩展，它提供了极高的自定义性。VSC为您提供了更改主题，更改键盘快捷键，调整设置，创建代码段等选项。</p>
<p><a href="https://www.linuxmi.com/wp-content/uploads/2021/01/games.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-5383 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/01/games-1024x576.png" alt="" width="731" height="411" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/games-1024x576.png 1024w, https://www.linuxmi.com/wp-content/uploads/2021/01/games.png 1920w" sizes="auto, (max-width: 731px) 100vw, 731px" /></a></p>
<p>游戏扩展：<a href="https://www.linuxmi.com/vs-code-xiaobawang.html">https://www.linuxmi.com/vs-code-xiaobawang.html</a></p>
<p><strong>总结</strong></p>
<p>事实上，这个源代码编辑器经过了很长一段时间才成为程序员最流行的编辑器之一。它也成功地超越了其他以前著名和广泛使用的编辑器；这一切都归功于它的重量轻、速度快和众多的功能。</p>
<p>一方面，VSC由于提供了丰富的用户体验而受到欢迎，另一方面，它也与Visual Studio广泛地混淆了。各种各样的特性，如调试器，智能感知，Git集成等，对无数种编程语言的支持及其庞大的生态系统（具有各种扩展），使Visual Studio Code比其他编辑器有了优势。</p><p>The post <a href="https://www.linuxmi.com/visual-studio-code-huanying.html">为什么Visual Studio Code如此受欢迎？</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.linuxmi.com/visual-studio-code-huanying.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>如何在Windows 10上使用PowerToys</title>
		<link>https://www.linuxmi.com/windows-10-powertoys.html?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=windows-10-powertoys</link>
					<comments>https://www.linuxmi.com/windows-10-powertoys.html#respond</comments>
		
		<dc:creator><![CDATA[linuxmi]]></dc:creator>
		<pubDate>Wed, 06 Jan 2021 07:20:16 +0000</pubDate>
				<category><![CDATA[其他]]></category>
		<guid isPermaLink="false">https://www.linuxmi.com/?p=5147</guid>

					<description><![CDATA[<p>Windows 10拥有超过10亿用户，是全球领先的桌面操作系统。虽然操作系统提供了不错的功能集，但 &#8230;</p>
<p>The post <a href="https://www.linuxmi.com/windows-10-powertoys.html">如何在Windows 10上使用PowerToys</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>Windows 10拥有超过10亿用户，是全球领先的桌面操作系统。虽然操作系统提供了不错的功能集，但高级用户可能需要其他工具才能充分利用自己的计算机。微软为超级用户设计的一个工具就是PowerToys。在本文中，我们将向您展示如何在Windows 10上使用PowerToys附带的所有强大功能。</p>
<p><strong>在Windows 10上使用PowerToys</strong></p>
<p>今天，我们将经历PowerToys的安装过程及其提供的所有功能。请一直读到最后，学习如何使用该工具来提高工作流程中的工作效率。</p>
<p><strong>下载并安装PowerToys</strong></p>
<p>由于PowerToys并未与Windows 10捆绑在一起，因此您必须手动下载并安装它。为此，请访问<a href="https://github.com/microsoft/PowerToys/releases/latest" target="_blank" rel="noopener">PowerToys的GitHub页面</a>。在Assets部分中，单击最新的.exe文件来下载它。下载完成后，运行安装文件将应用程序安装到计算机上。</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-5148 size-full" src="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_132000.png" alt="" width="1184" height="729" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_132000.png 1184w, https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_132000-1024x630.png 1024w" sizes="auto, (max-width: 1184px) 100vw, 1184px" /></p>
<p>一旦你完成了安装过程，PowerToys应用程序的主页就会出现。如果您计划全面使用PowerToys，不要忘记开启“启动时运行”切换。</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-5150 size-full" src="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_132825.png" alt="" width="1066" height="711" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_132825.png 1066w, https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_132825-1024x683.png 1024w" sizes="auto, (max-width: 1066px) 100vw, 1066px" /></p>
<h3 id="2">颜色选择器</h3>
<p>拾<strong>色器</strong>在Windows 10上提供了一个方便的<strong>系统范围的拾色器</strong>。您可以使用它在Windows 10 PC上的任何位置即时选择颜色。该功能<strong>通过键盘快捷键“ Win + Shift + C”激活</strong>，带有一个编辑器，可调整​​所选择的颜色代码并以各种格式复制颜色，包括HEX，RGB，HSL，HSV，CMYK，HSB，HSI，HWB，和NCol。</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-5151 size-full" src="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_133219.png" alt="" width="1066" height="711" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_133219.png 1066w, https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_133219-1024x683.png 1024w" sizes="auto, (max-width: 1066px) 100vw, 1066px" /></p>
<p>在PowerToys中，您可以选择启用或禁用不同的颜色格式，并更改激活行为以仅显示颜色选择器或编辑器。您还可以选择将激活快捷方式更改为所需的组合。</p>
<h3 id="3">FancyZones</h3>
<p>FancyZones本质上是<strong> 满足所有多任务处理需求的</strong>超级<strong>窗口管理器</strong>。使用FancyZones的布局编辑器，您可以调整窗口位置，以有效利用PC上的空间。您可以<strong>使用键盘快捷键“ Win +`”激活布局编辑器，</strong>并使用模板之一（焦点，列，行，网格和优先级网格），或者创建适合您需要的自定义布局。</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-5152 size-full" src="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_133533.png" alt="" width="1148" height="636" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_133533.png 1148w, https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_133533-1024x567.png 1024w" sizes="auto, (max-width: 1148px) 100vw, 1148px" /></p>
<p>微软的PowerToys团队已经为FancyZones打包了很多自定义功能。您可以选择使用非主要的鼠标按钮来切换区域激活，在拖动窗口时在所有监视器上显示区域，甚至允许区域跨监视器显示。</p>
<p>你也可以覆盖默认的窗口快捷键(Win +左/右箭头)在区域之间切换，如果要自定义外观，则可以更改区域的突出显示不透明度，突出显示颜色，非活动颜色和边框颜色。也可以选择将某些应用添加到例外列表。</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-5153 size-full" src="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_133829.png" alt="" width="1066" height="711" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_133829.png 1066w, https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_133829-1024x683.png 1024w" sizes="auto, (max-width: 1066px) 100vw, 1066px" /></p>
<h3 id="4">文件资源管理器</h3>
<p>文件资源管理器加载项实用程序增加了Windows 10文件管理器预览窗格的灵活性。此附加组件<strong> 在预览窗格中添加了对markdown（.md）和可伸缩矢量图形（.svg）文件的支持</strong>。结果，您无需打开文件即可看到内容。您还将获得对.svg缩略图的支持，该缩略图将有助于快速识别文件。</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-5163" src="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_142425.png" alt="" width="966" height="769" /></p>
<p>在PowerToys中，您可以在预览窗格中启用或禁用这些文件的预览，并选择启用.svg文件的缩略图。</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-5165" src="https://www.linuxmi.com/wp-content/uploads/2021/01/linuxmi.gif" alt="" width="925" height="843" /></p>
<h3 id="5">图像大小调整器</h3>
<p>图像大小调整器是我最喜欢的PowerToys工具之一。顾名思义，您可以<strong>使用它来调整图像的大小</strong>。使图像大小调整器变得方便的原因是，您可以<strong>通过从文件资源管理器中单击鼠标右键</strong>来<strong>访问它</strong>。启用后，您会在右键菜单中看到一个新的“调整图片大小”选项。</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-5156" src="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_135152.png" alt="" width="692" height="452" /></p>
<p>在现在出现的图像缩放器界面中，您可以选择一种预定义的尺寸或选择一种自定义尺寸。您还可以选择替换原始文件，并将其配置为忽略图片的方向。</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-5155" src="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_134915.png" alt="" width="607" height="611" /></p>
<p>进入图像大小调整器的PowerToys自定义设置后，您可以创建一个经常使用的新尺寸，并以厘米，英寸，百分比或像素为单位进行定义。该工具支持PNG，BMP，JPEG，TIFF，WMPhoto和GIF编码。您还可以设置质量级别，启用PNG隔行扫描和TIFF压缩。</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-5154" src="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_134611.png" alt="" width="1011" height="669" /></p>
<p>该工具支持以下文件格式参数，可用于命名已调整大小的文件：</p>
<ul>
<li>％1 –原始文件名</li>
<li>％2 –大小名称（在Image Resizer设置中设置）</li>
<li>％3 –选定的宽度</li>
<li>％4 –选择的高度</li>
<li>％5 –实际高度</li>
<li>％6 –实际宽度</li>
</ul>
<h3 id="6">键盘管理员</h3>
<p>键盘管理器是<strong>用于重新映射键和快捷方式</strong>的<strong>实用程序</strong>。当笔记本电脑键盘上的某个键停止工作时，这可能是一个救命稻草。使用此工具，您可以轻松地用不太重要的工作密钥重新映射基本死键。</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-5157" src="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_135609.png" alt="" width="1011" height="669" /></p>
<p>例如，您可以使用上一行中的功能键之一重新映射键“ A”。当然，这可能并不方便，但是在您更换键盘之前，这确实是一个不错的解决方法。键盘管理器还允许您重新映射并创建自己的快捷方式。请注意，此工具需要Windows 10 1903（内部版本18362）或更高版本。</p>
<h3 id="7">PowerRename</h3>
<p>如果您的工作流程涉及重命名大量文件，那么PowerRename可能正是您所需要的。该工具<strong>提供了</strong>具有一些有用功能的<strong>批量重命名</strong>。使用PowerRename，您可以<strong>修改文件名，使用搜索和替换文件名的特定部分以及使用正则表达式</strong>。</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-5158" src="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_140006.png" alt="" width="655" height="741" /></p>
<p>您可以<strong> 通过右键单击一个文件</strong>或一组文件，然后从可用选项列表中选择“ PowerRename”来访问PowerRename。</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-5159" src="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_140146.png" alt="" width="770" height="628" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_140146.png 770w, https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_140146-430x350.png 430w" sizes="auto, (max-width: 770px) 100vw, 770px" /></p>
<h3 id="8">PowerToys Run</h3>
<p>PowerToys Run是在Build 2020开发者大会上推出的备受炒作的类似于Spotlight的应用启动器工具。您可以<strong>使用键盘快捷键“ Alt + Space”访问它，</strong>并使用它搜索应用程序，文件，文件夹，正在运行的进程，甚至执行简单的数学计算。值得注意的是，您需要Windows 10 1903（内部版本18362）或更高版本才能使用PowerToys Run。</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-5161" src="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_142133.png" alt="" width="916" height="543" /></p>
<p>PowerToys Run提供以下操作键：</p>
<ul>
<li>= &#8211; 基于计算器的操作</li>
<li>？ &#8211; 文件搜索</li>
<li>.  &#8211; 搜索已安装的应用</li>
<li>//  &#8211; 访问网址</li>
<li>&lt; &#8211; 运行过程</li>
<li>&gt; &#8211; Shell命令</li>
</ul>
<h3 id="9">快捷键指南</h3>
<p>最后，我们还有快捷指南，这是一个方便的补充，将帮助新的Windows 10用户。当您<strong>按住Windows键</strong>时，“快捷键指南”<strong>会覆盖Windows 10常用键盘快捷 </strong><strong>键</strong>。您也可以组合使用“ Windows +？”来访问快捷方式指南。</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-5162 size-full" src="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_141956.png" alt="" width="1587" height="949" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_141956.png 1587w, https://www.linuxmi.com/wp-content/uploads/2021/01/2021-01-06_141956-1024x612.png 1024w" sizes="auto, (max-width: 1587px) 100vw, 1587px" /></p>
<p>在PowerToys中，您可以调整覆盖的持续时间，更改背景的不透明度，并为覆盖选择一种颜色模式。对于初学者来说，这无疑是一个很好的Windows 10技巧。</p><p>The post <a href="https://www.linuxmi.com/windows-10-powertoys.html">如何在Windows 10上使用PowerToys</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.linuxmi.com/windows-10-powertoys.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>2021年你必须拥有的10个最流行和最基本的Linux应用</title>
		<link>https://www.linuxmi.com/2021-10-linux-app.html?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=2021-10-linux-app</link>
					<comments>https://www.linuxmi.com/2021-10-linux-app.html#respond</comments>
		
		<dc:creator><![CDATA[linuxmi]]></dc:creator>
		<pubDate>Mon, 04 Jan 2021 08:44:39 +0000</pubDate>
				<category><![CDATA[其他]]></category>
		<guid isPermaLink="false">https://www.linuxmi.com/?p=5088</guid>

					<description><![CDATA[<p>本文介绍了预计在2021年最受欢迎的十大Linux应用程序。那么现在让我们看看这个列表。 您是否正在 &#8230;</p>
<p>The post <a href="https://www.linuxmi.com/2021-10-linux-app.html">2021年你必须拥有的10个最流行和最基本的Linux应用</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>本文介绍了预计在2021年最受欢迎的十大Linux应用程序。那么现在让我们看看这个列表。</p>
<p>您是否正在寻找适合台式机或笔记本电脑的最佳Linux应用程序，以带您进入2021年？在本文中，我们将列出您必须在Linux操作系统上安装的最流行的Linux应用程序。该列表完全包含免费的开源应用程序，您可以轻松地在任何Linux发行版上安装这些应用程序。</p>
<p><strong>1、Firefox</strong></p>
<p>Firefox是许多Linux发行版（例如Ubuntu和Linux Mint）的默认Web浏览器。浏览器简单而流畅的界面是其众多吸引力之一。 Firefox支持许多扩展来增强您的Web体验，并且您可以通过Mozilla加载项页面进一步自定义浏览器，可以在其中安装色彩缤纷的主题。</p>
<p style="text-align: center;"><a href="https://www.linuxmi.com/wp-content/uploads/2021/01/Ubuntu-20.04-2021-01-04-15-20-39.png"><img loading="lazy" decoding="async" class="alignnone wp-image-5091 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/01/Ubuntu-20.04-2021-01-04-15-20-39-1024x576.png" alt="" width="731" height="411" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/Ubuntu-20.04-2021-01-04-15-20-39-1024x576.png 1024w, https://www.linuxmi.com/wp-content/uploads/2021/01/Ubuntu-20.04-2021-01-04-15-20-39.png 1920w" sizes="auto, (max-width: 731px) 100vw, 731px" /></a></p>
<p>Firefox提供了一些可以在Web浏览器中找到的最佳功能，以及对同步功能（例如浏览历史记录，书签等）的出色支持。</p>
<p>访问网站：https://www.mozilla.org/en-US/firefox/new/</p>
<p><strong>2、Thunderbird</strong></p>
<p>Thunderbird是一款出色的免费电子邮件客户端，可让您从一个方便的位置管理任意数量的电子邮件帐户。它非常灵活，可以通过填补其功能集上任何漏洞的插件进行扩展。</p>
<p style="text-align: center;"><a href="https://www.linuxmi.com/wp-content/uploads/2020/10/Thunderbird-78.3.2.png"><img loading="lazy" decoding="async" class="alignnone wp-image-3242 size-large" src="https://www.linuxmi.com/wp-content/uploads/2020/10/Thunderbird-78.3.2-1024x576.png" alt="" width="731" height="411" srcset="https://www.linuxmi.com/wp-content/uploads/2020/10/Thunderbird-78.3.2-1024x576.png 1024w, https://www.linuxmi.com/wp-content/uploads/2020/10/Thunderbird-78.3.2.png 1920w" sizes="auto, (max-width: 731px) 100vw, 731px" /></a></p>
<p>Thunderbird是最受欢迎的电子邮件应用程序之一。它是免费的，开源的，可自定义的，功能丰富的，并且最重要的是易于安装。 Thunderbird是来自Firefox的同一家开发公司的客户端。这是一种跨平台，更快速的现代网络电子邮件技术，可用于使用电子邮件服务。</p>
<p>访问网站：https://www.thunderbird.net/</p>
<p><strong>3、LibreOffice</strong></p>
<p>每个人都需要一套办公软件来完成日常任务。 Microsoft Office也许是最知名的选项，但是也有很多免费的替代品，它们可以复制Word，Excel，PowerPoint和company的几乎所有功能。 LibreOffice就是其中一种，它赢得了周围最好的免费办公套件之一的美誉。</p>
<p style="text-align: center;"><a href="https://www.linuxmi.com/wp-content/uploads/2021/01/Ubuntu-20.04-2021-01-04-15-31-34.png"><img loading="lazy" decoding="async" class="alignnone wp-image-5093 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/01/Ubuntu-20.04-2021-01-04-15-31-34-1024x576.png" alt="" width="731" height="411" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/Ubuntu-20.04-2021-01-04-15-31-34-1024x576.png 1024w, https://www.linuxmi.com/wp-content/uploads/2021/01/Ubuntu-20.04-2021-01-04-15-31-34.png 1920w" sizes="auto, (max-width: 731px) 100vw, 731px" /></a></p>
<p>LibreOffice包含六个组件程序，这些组件程序可提供办公套件所需的一切：</p>
<ul>
<li>Writer (文字处理)</li>
<li>Calc (电子表格)</li>
<li>Impress (演示文稿/幻灯片)</li>
<li>Draw (矢量绘图)</li>
<li>Math (数学公式)</li>
<li>Base (数据库)</li>
</ul>
<p>您可以保存并打开许多不同的格式，包括Microsoft文件类型（包括DOC，DOCX，PPT，PPTX等），如果您要与Microsoft Office用户进行协作，或者以前使用过Microsoft套件，但已决定尝试使用LibreOffice。</p>
<p>访问网站：https://www.libreoffice.org/</p>
<p><strong>4、VLC媒体播放器</strong></p>
<p>如果由于某些兼容性问题而在用媒体播放器播放喜欢的视频时遇到麻烦，那么最好一次尝试VLC。这个开源且免费的软件工具足以播放几乎所有流行的视频文件格式。此外，其余所有组件都可以使用同一接口轻松转换为支持的组件。</p>
<p style="text-align: center;"><a href="https://www.linuxmi.com/wp-content/uploads/2021/01/vlc.png"><img loading="lazy" decoding="async" class="alignnone wp-image-5094 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/01/vlc-1024x576.png" alt="" width="731" height="411" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/vlc-1024x576.png 1024w, https://www.linuxmi.com/wp-content/uploads/2021/01/vlc.png 1920w" sizes="auto, (max-width: 731px) 100vw, 731px" /></a></p>
<p>VLC Media Player支持流传输，几乎可以使用可下载的插件进行无限扩展。 VLC具有用于调整视频和音频播放的出色工具，它可以播放多年来未曾提及的格式，而且运行速度非常快。</p>
<p>访问网站：https://www.videolan.org/vlc/</p>
<p><strong>5、GIMP</strong></p>
<p>GIMP是最好的免费照片编辑器，并具有大量的专业品质功能。它包括图层，高度可自定义的画笔，滤镜和自动图像增强工具，并支持大量插件。它是Photoshop的一个免费替代品。</p>
<p style="text-align: center;"><a href="https://www.linuxmi.com/wp-content/uploads/2020/10/GIMP.png"><img loading="lazy" decoding="async" class="wp-image-3151 size-large aligncenter" src="https://www.linuxmi.com/wp-content/uploads/2020/10/GIMP-1024x576.png" alt="" width="731" height="411" srcset="https://www.linuxmi.com/wp-content/uploads/2020/10/GIMP-1024x576.png 1024w, https://www.linuxmi.com/wp-content/uploads/2020/10/GIMP.png 1920w" sizes="auto, (max-width: 731px) 100vw, 731px" /></a></p>
<p>GIMP非凡的编辑功能使您可以从头开始修饰照片或创建图像。包括裁剪，自动图像优化工具，颜色调整工具，可自定义的画笔等。对于有经验的用户，还有其他更高级的功能，例如滤镜，贝塞尔曲线，图层蒙版和动画包。</p>
<p>访问网站：https://www.gimp.org/</p>
<p><strong>6、Visual Studio Code</strong></p>
<p>Visual Studio Code是Microsoft提供的免费源代码编辑器。由于其功能，它被认为是最好的和著名的开源代码编辑器之一。是的，它是Microsoft提供的众多开源产品之一。对于VS Code开发，MS已为开发人员做出了重大贡献。</p>
<p style="text-align: center;"><a href="https://www.linuxmi.com/wp-content/uploads/2020/10/vscode-5.png"><img loading="lazy" decoding="async" class="alignnone wp-image-3636 size-large" src="https://www.linuxmi.com/wp-content/uploads/2020/10/vscode-5-1024x576.png" alt="" width="731" height="411" srcset="https://www.linuxmi.com/wp-content/uploads/2020/10/vscode-5-1024x576.png 1024w, https://www.linuxmi.com/wp-content/uploads/2020/10/vscode-5.png 1920w" sizes="auto, (max-width: 731px) 100vw, 731px" /></a></p>
<p>功能包括对调试，语法突出显示，智能代码完成，代码段，代码重构和嵌入式Git的支持。用户可以更改主题，键盘快捷键，首选项，并安装添加了其他功能的扩展。</p>
<p>访问网站：https://code.visualstudio.com/</p>
<p><strong>7、Audacity</strong></p>
<p>如果您要开始播客或录制音乐，或者只需要一个工具来组合和转换一些音频样本，则Audacity很难出错。该程序使您可以轻松导入，混合和组合音轨（立体声，单声道甚至是多轨录音）并将输出呈现为一个。</p>
<p style="text-align: center;"><a href="https://www.linuxmi.com/wp-content/uploads/2021/01/Audacity.png"><img loading="lazy" decoding="async" class="alignnone wp-image-5095 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/01/Audacity-1024x576.png" alt="" width="731" height="411" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/Audacity-1024x576.png 1024w, https://www.linuxmi.com/wp-content/uploads/2021/01/Audacity.png 1920w" sizes="auto, (max-width: 731px) 100vw, 731px" /></a></p>
<p>要开始使用Audacity，请将您要编辑的声音拖到主窗口中，或单击“录制”按钮以从计算机的内置麦克风或连接的音频接口开始录制。</p>
<p>Audacity是一款功能强大的编辑器，可为您提供与以往使用Sony的Sound Forge或Bias Peak支付高昂费用相同的强大功能。但是，如果您要开始新的播客或为独立游戏修剪100种音效，则Audacity应该是您的首选。如果您是初学者，那么Audacity也很可能是您的最终选择。</p>
<p>访问网站：https://www.audacityteam.org/</p>
<p><strong>8、VirtualBox</strong></p>
<p>VirtualBox是一个跨平台的虚拟化应用程序，可帮助您在一台计算机上同时运行多个操作系统，包括Windows，Linux，Mac OS X，Oracle Solaris以及许多来宾操作系统。它已经是功能丰富的解决方案，但是由于它得到了专用社区的支持并得到了强大的公司的支持，因此它会频繁发布版本，这些版本会继续添加Oracle审核过的功能，以确保专业质量。</p>
<p style="text-align: center;"><a href="https://www.linuxmi.com/wp-content/uploads/2020/09/VirtualBox-6.1.14-3.png"><img loading="lazy" decoding="async" class="alignnone wp-image-2476 size-large" src="https://www.linuxmi.com/wp-content/uploads/2020/09/VirtualBox-6.1.14-3-1024x576.png" alt="" width="731" height="411" srcset="https://www.linuxmi.com/wp-content/uploads/2020/09/VirtualBox-6.1.14-3-1024x576.png 1024w, https://www.linuxmi.com/wp-content/uploads/2020/09/VirtualBox-6.1.14-3.png 1920w" sizes="auto, (max-width: 731px) 100vw, 731px" /></a></p>
<p>它是根据GNU通用公共许可证（GPL）版本2的条款可作为开源软件免费提供的唯一专业解决方案。如果您在付费软件市场上找不到可以提供所有功能的虚拟化解决方案，您想要的功能和特性，VirtualBox可能是您的最佳选择。</p>
<p>访问网站：https://www.virtualbox.org/</p>
<p><strong>9、Shotcut</strong></p>
<p>Shotcut是免费的开源视频编辑软件。它提供了许多标准的视频编辑功能，在您花了一点时间弄清楚之后，使用起来并不难。 Shotcut提供了其他免费程序很少做的一件事：包含大量音频和视频过滤器的库，功能强大且易于理解。您可以将多个过滤器添加到一个文件，这意味着您可以有效地调整有关图像或声音呈现方式的每个细节。专业工具提供了所有这些功能，但是这种功能和易用性的结合在自由软件中并不常见。</p>
<p style="text-align: center;"><a href="https://www.linuxmi.com/wp-content/uploads/2021/01/Shotcut.png"><img loading="lazy" decoding="async" class="alignnone wp-image-5096 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/01/Shotcut-1024x576.png" alt="" width="731" height="411" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/Shotcut-1024x576.png 1024w, https://www.linuxmi.com/wp-content/uploads/2021/01/Shotcut.png 1920w" sizes="auto, (max-width: 731px) 100vw, 731px" /></a></p>
<p>Shotcut的主要优点是支持许多不同的视频格式，而且它不需要导入，这意味着它提供了本机时间轴视频编辑。 Shotcut中有许多输出选项，例如Apple ProRes，HDV，DVD，Flash，H.264，GIF动画，OGG Vorbis，WebM和WMV。此外，Shotcut还为导出提供了H.265代码。因此，您的4K视频将更加可控，并且压缩效果更好。</p>
<p>访问网站：https://shotcut.org/</p>
<p><strong>10、Transmission</strong></p>
<p>Transmission是一个BitTorrent客户端，它在跨平台后端之上具有各种用户界面。当前，它是GNOME桌面环境的默认BitTorrent客户端。</p>
<p>Transmission具有BT客户端已知的最时尚的Web界面之一。尽管这是许多功能的一部分，但是Transmission的Web界面可能是自己的程序。它允许通过简单的方式进行远程访问的配置，但是您需要相应地调整防火墙规则。 Web界面几乎可以完成桌面应用程序可以执行的所有操作。</p>
<p style="text-align: center;"><a href="https://www.linuxmi.com/wp-content/uploads/2021/01/Transmission.png"><img loading="lazy" decoding="async" class="alignnone wp-image-5097 size-large" src="https://www.linuxmi.com/wp-content/uploads/2021/01/Transmission-1024x576.png" alt="" width="731" height="411" srcset="https://www.linuxmi.com/wp-content/uploads/2021/01/Transmission-1024x576.png 1024w, https://www.linuxmi.com/wp-content/uploads/2021/01/Transmission.png 1920w" sizes="auto, (max-width: 731px) 100vw, 731px" /></a></p>
<p>最大的好处是它只占用很少的系统内存。通常认为它是所有主要BitTorrent客户中消耗最少的。对于那些寻求极简但功能强大的洪流客户端的用户来说，传输是一个不错的选择。</p>
<p>访问网站：https://transmissionbt.com/</p><p>The post <a href="https://www.linuxmi.com/2021-10-linux-app.html">2021年你必须拥有的10个最流行和最基本的Linux应用</a> first appeared on <a href="https://www.linuxmi.com">Linux迷</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.linuxmi.com/2021-10-linux-app.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
