從與Chatgpt一次簡(jiǎn)單程序交流，第一波AI沖擊可見(jiàn)一斑

通過(guò)一次簡(jiǎn)單人機(jī)交流，第一次感受到AI智能化的水平早已不再是簡(jiǎn)單的分析檢索，開(kāi)始邁向分析創(chuàng)造，甚至更高的領(lǐng)域。

交流從一個(gè)簡(jiǎn)單的前端開(kāi)發(fā)需求開(kāi)始。
需求：生成一個(gè)頁(yè)面自定義內(nèi)容的頁(yè)面水印效果

ME: 生成一個(gè)頁(yè)面水印效果
AI:
要生成一個(gè)頁(yè)面水印效果，可以使用CSS樣式來(lái)實(shí)現(xiàn)。以下是一個(gè)簡(jiǎn)單的示例：

<!DOCTYPE html>
<html>
<head>
    <title>Page Watermark</title>
    <style>
        body {
            background-image: url('background.jpg');
            background-repeat: repeat;
        }
        .watermark {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 5em;
            color: rgba(255, 255, 255, 0.5);
            opacity: 0.5;
            z-index: -1;
            pointer-events: none;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
    </style>
</head>
<body>
    <div class="watermark">WATERMARK</div>
</body>
</html>

在這個(gè)示例中，我們使用了一個(gè)背景圖片作為頁(yè)面的背景，并在頁(yè)面中添加了一個(gè)水印。水印的樣式通過(guò)CSS類(lèi)名.watermark來(lái)定義，其中position: fixed將水印固定在頁(yè)面上，top: 50%; left: 50%將水印定位在頁(yè)面的中心位置，transform: translate(-50%, -50%)將水印向左上方移動(dòng)50%的寬度和高度，以使其完全居中。font-size設(shè)置水印的字體大小，color設(shè)置水印的顏色，opacity設(shè)置水印的透明度，z-index設(shè)置水印的層級(jí)，pointer-events: none禁用水印的鼠標(biāo)事件，以便用戶(hù)可以在水印上方進(jìn)行交互。最后，我們使用transform: rotate(-45deg)將水印旋轉(zhuǎn)45度，以使其呈現(xiàn)對(duì)角線的效果。

通過(guò)調(diào)整這些CSS屬性，您可以自定義水印的樣式和位置，以滿(mǎn)足您的需求。

ME: 生成一個(gè)頁(yè)面水印效果 非圖片
AI：以下是一個(gè)生成頁(yè)面水印效果的示例代碼，使用了純CSS和JavaScript：

CSS部分：

.watermark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  font-size: 2rem;
  font-weight: bold;
  color: #ccc;
  opacity: 0.2;
  text-align: center;
  transform: rotate(-45deg);
  transform-origin: center;
}

JavaScript部分：

window.onload = function() {
  var watermark = document.createElement('div');
  watermark.className = 'watermark';
  watermark.innerText = 'Watermark Text';
  document.body.appendChild(watermark);
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為“watermark”的CSS類(lèi)，它定義了水印的樣式和位置。我們使用了文本作為水印，而不是圖片。我們還使用了CSS的transform屬性來(lái)旋轉(zhuǎn)水印文本。

然后，我們使用JavaScript在頁(yè)面加載時(shí)動(dòng)態(tài)創(chuàng)建一個(gè)div元素，并將其添加到頁(yè)面的body元素中。這個(gè)div元素使用了“watermark”類(lèi)，因此它將顯示為水印。我們還使用了innerText屬性來(lái)設(shè)置水印文本。

你可以根據(jù)需要修改CSS類(lèi)的樣式，例如更改水印文本、字體、顏色、透明度、旋轉(zhuǎn)角度等。

這次AI使用了非圖片方式實(shí)現(xiàn)我的需求并可考慮到了我下一步的需求，就是自定義水印內(nèi)容。

程序基本滿(mǎn)足了我對(duì)頁(yè)面效果的需求，后續(xù)重復(fù)測(cè)試中，AI給出了更多的不同實(shí)現(xiàn)方式和效果，都不夠完美，但方案都是完整的可運(yùn)行的。 隨后對(duì)需求拆分細(xì)化提供給AI。

ME：js生成一個(gè)帶自定義文字的圖片

AI：
要使用JavaScript生成帶自定義文字的圖片，您可以使用HTML5的Canvas元素和JavaScript來(lái)實(shí)現(xiàn)。以下是一個(gè)簡(jiǎn)單的示例代碼：

HTML代碼：

<canvas id="myCanvas"></canvas>

JavaScript代碼：

// 獲取Canvas元素
var canvas = document.getElementById("myCanvas");

// 獲取Canvas上下文
var ctx = canvas.getContext("2d");

// 設(shè)置Canvas寬度和高度
canvas.width = 400;
canvas.height = 200;

// 設(shè)置背景顏色
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 設(shè)置文本樣式
ctx.font = "30px Arial";
ctx.fillStyle = "#000000";

// 繪制文本
var text = "Hello, World!";
ctx.fillText(text, 50, 100);

// 將Canvas轉(zhuǎn)換為圖像
var img = canvas.toDataURL("image/png");

// 創(chuàng)建圖像元素
var imgElement = document.createElement("img");

// 設(shè)置圖像元素的src屬性
imgElement.src = img;

// 將圖像元素添加到頁(yè)面中
document.body.appendChild(imgElement);

在上面的代碼中，我們首先獲取了Canvas元素和上下文，然后設(shè)置了Canvas的寬度和高度，并填充了白色背景。接著，我們?cè)O(shè)置了文本樣式，包括字體大小和顏色，并使用fillText()方法繪制了文本。

然后，我們使用toDataURL()方法將Canvas轉(zhuǎn)換為Base64編碼的圖像數(shù)據(jù)，并創(chuàng)建一個(gè)圖像元素，將其src屬性設(shè)置為Base64編碼的圖像數(shù)據(jù)。最后，我們將圖像元素添加到頁(yè)面中。

您可以根據(jù)需要修改文本樣式和位置，以及Canvas的寬度和高度。如果您想將生成的圖像保存到本地，可以使用toDataURL()方法將Canvas轉(zhuǎn)換為Base64編碼的圖像數(shù)據(jù)，然后將其保存為圖片文件。

到這里雖讓AI沒(méi)有給我一個(gè)完成的需求代碼，但是作為一個(gè)程序員，已經(jīng)可以整理出完成的需求代碼。

  <!DOCTYPE html>
<html>
<head>
    <title>帶水印的頁(yè)面</title>
    <style>
        .watermark {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
        }
        #myCanvas{
            display: none;
        }
    </style>
</head>
<body>
    <div class="watermark">
        <canvas id="myCanvas"></canvas>
    </div>
    <script>
        // 獲取Canvas元素
        var canvas = document.getElementById("myCanvas");

        // 獲取Canvas上下文
        var ctx = canvas.getContext("2d");

        // 設(shè)置Canvas寬度和高度
        canvas.width = 400;
        canvas.height = 200;

        // 設(shè)置背景顏色
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 設(shè)置文本樣式
        ctx.font = "30px Arial";
        ctx.fillStyle = "#e5e5e5";

        // 繪制文本
        var text = "Hello, AI!";
        ctx.fillText(text, 50, 100);

        // 將Canvas轉(zhuǎn)換為圖像
        var img = canvas.toDataURL("image/png");

        document.querySelector('.watermark').style.backgroundImage =  `url(${img})`;
    </script>
</body>
</html>

你以為這就結(jié)束了 ，更驚人的還在后面，將代碼輸入給AI。

AI：
這段代碼實(shí)現(xiàn)了在頁(yè)面上添加帶水印的效果。具體實(shí)現(xiàn)步驟如下：

  1. 創(chuàng)建一個(gè)div元素，并設(shè)置其樣式為position: fixed，top: 0，left: 0，width: 100%，height: 100%。這個(gè)div元素將作為水印的容器。

  2. 在div元素中創(chuàng)建一個(gè)canvas元素，并設(shè)置其id為myCanvas。這個(gè)canvas元素將用于繪制水印。

  3. 獲取canvas元素和其上下文對(duì)象ctx，并設(shè)置canvas的寬度和高度。

  4. 使用ctx繪制水印，包括設(shè)置背景顏色、文本樣式和繪制文本。

  5. 將canvas轉(zhuǎn)換為圖像，并將其作為背景圖片設(shè)置給水印容器div元素。

  6. 最后，將水印容器div元素添加到頁(yè)面中。

ME：水印旋轉(zhuǎn)45度
AI：
要將水印旋轉(zhuǎn)45度，可以在繪制文本之前，使用ctx.rotate()方法將畫(huà)布旋轉(zhuǎn)45度，然后再繪制文本。具體實(shí)現(xiàn)步驟如下：

  1. 在繪制文本之前，使用ctx.translate()方法將畫(huà)布的原點(diǎn)移動(dòng)到畫(huà)布中心。
ctx.translate(canvas.width / 2, canvas.height / 2);
  1. 使用ctx.rotate()方法將畫(huà)布旋轉(zhuǎn)45度。
ctx.rotate(Math.PI / 4);
  1. 繪制文本。
ctx.fillText(text, 0, 0);
  1. 在繪制完成后，使用ctx.rotate()方法將畫(huà)布旋轉(zhuǎn)回來(lái)，并使用ctx.translate()方法將畫(huà)布原點(diǎn)移回左上角。
ctx.rotate(-Math.PI / 4);
ctx.translate(-canvas.width / 2, -canvas.height / 2);

完整的代碼示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>帶水印的頁(yè)面</title>
    <style>
        .watermark {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
        }
        #myCanvas {
            display: none;
        }
    </style>
</head>
<body>
    <div class="watermark">
        <canvas id="myCanvas"></canvas>
    </div>
    <script>
        // 獲取Canvas元素
        var canvas = document.getElementById("myCanvas");
        // 獲取Canvas上下文
        var ctx = canvas.getContext("2d");
        // 設(shè)置Canvas寬度和高度
        canvas.width = 400;
        canvas.height = 200;
        // 設(shè)置背景顏色
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        // 設(shè)置文本樣式
        ctx.font = "30px Arial";
        ctx.fillStyle = "#e5e5e5";
        // 將畫(huà)布原點(diǎn)移動(dòng)到畫(huà)布中心
        ctx.translate(canvas.width / 2, canvas.height / 2);
        // 將畫(huà)布旋轉(zhuǎn)45度
        ctx.rotate(Math.PI / 4);
        // 繪制文本
        var text = "Hello, AI!";
        ctx.fillText(text, 0, 0);
        // 將畫(huà)布旋轉(zhuǎn)回來(lái)
        ctx.rotate(-Math.PI / 4);
        // 將畫(huà)布原點(diǎn)移回左上角
        ctx.translate(-canvas.width / 2, -canvas.height / 2);
        // 將Canvas轉(zhuǎn)換為圖像
        var img = canvas.toDataURL("image/png");
        document.querySelector('.watermark').style.backgroundImage =  `url(${img})`;
    </script>
</body>
</html>

驚人的分析理解能力和二次修改優(yōu)化能力，是時(shí)候思考該如何在AI快速優(yōu)化成熟的背景下如何生活了。作為程序員，學(xué)習(xí)更多的語(yǔ)言？更新的語(yǔ)法？更多的框架？第一波AI沖擊面前，獨(dú)立分析思考不再是人類(lèi)的優(yōu)勢(shì)，那該如何重構(gòu)自身在工作中的核心競(jìng)爭(zhēng)力。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ￥開(kāi)啟￥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開(kāi)一個(gè)線程，因...
    小菜c閱讀 7,363評(píng)論 0贊 17
  • 2020/04/29 周三 #[http://fe.zuo11.com/daily/2020-04.html#ui...
    抓猹吃瓜閱讀 405評(píng)論 0贊 1
  • 一：canvas簡(jiǎn)介 1.1什么是canvas？ ①：canvas是HTML5提供的一種新標(biāo)簽 ②：HTML5 ...
    GreenHand1閱讀 4,882評(píng)論 2贊 32
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 28,841評(píng)論 1贊 45
  • 一、canvas簡(jiǎn)介 1.1 什么是canvas？（了解） 是HTML5提供的一種新標(biāo)簽 Canvas是一個(gè)矩形區(qū)...
    J_L_L閱讀 1,695評(píng)論 0贊 4

友情鏈接更多精彩內(nèi)容