在閑逛中發現,谷歌竟然悄悄地在去年12月上線了一個新的瀏覽器應用程序:Chrome Canvas
這款新的應用程序允許用戶直接在瀏覽器內快速涂鴉,并通過Chrome Unboxed自動保存到谷歌賬戶。
只需要在地址欄中輸入:
任何一臺電腦的Chrome瀏覽器上,你都能打開這個簡單的繪圖應用程序,而不需要下載任何額外的東西。
Chrome Canvas可以在任何支持WebAssembly的瀏覽器上使用,甚至是Firefox。
除了可自定義的調色板之外,程序內還配有鉛筆,鋼筆,記號筆,粉筆四種筆刷,以及橡皮擦工具。
完成繪圖后,用戶可以將其導出為PNG文件傳送至手機,或者在手機上繪圖傳到PC。
除此之外,用戶還可以直接利用本地圖片進行繪畫,只需點擊以下按鈕上傳圖片即可。
家好,很高興又見面了,我是"高級前端進階",由我帶著大家一起關注前端前沿、深入前端底層技術,大家一起進步,也歡迎大家關注、點贊、收藏、轉發!
ai2html 是 Adob?e Illustrator 的開源腳本,可將 Illustrator 文檔轉換為 html 和 css,基于 ai2html 的諸多示例登上了 New York Times。
ai2html由不同的組成部分:
目前 ai2html 在 Github 上開源,是一個值得關注的 AI 類前端開源項目。
很多人會有此疑問,為什么不直接將 Illustrator 文件導出為圖像或 SVG?
圖像和 SVG 中的文本會隨著圖像的縮放而縮放,因此當藝術品縮小時,文本很快就會變得難以辨認,或者在放大時看起來非常大。
通過將文本渲染為 html,可以上下縮放“圖形”同時保持文本在相同的字體大小和行高下可讀,從而適應從手機到巨型桌面顯示器的視口。
可以打開鏈接 http://nyti.ms/1CQdkwq ,然后查看頁面時更改窗口大小,此時將看到圖稿比例變化,但文本保持相同大小。 更多示例可以查看 https://del.icio.us/archietse/ai2html+responsive
同時,當 Illustrator 保存 SVG 時,每一行文本都會被分解為單獨的 SVG 元素,這使得編輯文本變得非常困難。 通過以 HTML 形式渲染文本,編輯人員可以更輕松地進入 CMS 并進行編輯,而無需費力地瀏覽一堆 SVG 代碼。
當然,ai2html 也有一定的局限性,主要體現在以下幾點:
將 ai2html 的 CDN 文件下載保存到電腦,下載地址已經在文末給出。
將 ai2html.js 文件移動到腳本所在的 Illustrator 文件夾中。 例如,在運行 Adobe Illustrator CC 2015 的 Mac 上,路徑為:
/Applications/Adobe Illustrator CC 2015/Presets/en_US/Scripts/ai2html.js
接著按照以下步驟使用 ai2html:
http://ai2html.org/
https://github.com/newsdev/ai2html
https://raw.githubusercontent.com/newsdev/ai2html/master/ai2html.js
載說明:原創不易,未經授權,謝絕任何形式的轉載
使用HTML5 Canvas構建繪圖應用是在Web瀏覽器中創建交互式和動態繪圖體驗的絕佳方式。HTML5 Canvas元素提供了一個繪圖表面,允許您操作像素并以編程方式創建各種形狀和圖形。本文將為您提供使用HTML5 Canvas創建繪圖應用的概述和指導。此外,它還將通過解釋HTML設置、JavaScript實現、用戶交互和繪圖功能來幫助您理解構建繪圖應用的步驟。
HTML canvas標簽是一個HTML元素,它提供了一個空白的繪圖表面,可以使用JavaScript來渲染圖形、形狀和圖像。繪圖應用程序利用HTML5 canvas的功能,使用戶能夠以數字方式創建藝術作品、草圖和插圖。此外,使用HTML5 canvas構建的繪圖應用程序允許用戶與畫布進行交互,捕捉鼠標移動和點擊事件,實時繪制、擦除或操作元素。
HTML5畫布非常適合創建繪圖應用程序,原因如下:
您可以使用HTML5 Canvas以以下方式為繪圖應用程序設置HTML結構:
<!DOCTYPE html>
<html>
<head>
<title>Drawing Application</title>
<style>
body {
margin: 3px;
padding: 6px;
font-size: 22px;
}
canvas {
border: 2px solid black;
}
.toolbar button,
#clearButton,
#saveButton {
padding: 15px;
font-size: 24px;
}
</style>
</head>
<body>
<h1>HTML Setup for a Drawing Application Using HTML5 Canvas</h1>
<canvas id="myCanvas" width="700" height="400"></canvas>
<button id="clearButton">Clear</button>
</body>
</html>
結果:
在上面的示例中,我們通過添加帶有ID為“myCanvas”的畫布元素并分別指定其寬度和高度為700和400像素來構建了繪圖應用程序的HTML結構。我們還在畫布下方包含了一個ID為“clearButton”的“清除”按鈕,為用戶提供了一種方便的方式來從畫布中刪除所有繪制的元素,并為新的繪圖創建一個空白畫布。
添加一些元素和功能,使用額外的HTML和CSS使繪圖應用程序看起來更像一個應用程序。例如,您可以添加一個工具欄、一個顏色調色板、一個畫筆大小和一個狀態欄。以下是一個示例,其中包含一些額外的元素,以增強繪圖應用程序的外觀和布局:
<div class="toolbar">
<button id="pencilTool">Pencil</button>
<button id="brushTool">Brush</button>
<button id="eraserTool">Eraser</button>
<input type="color" id="colorPicker" />
<select id="brushSize">
<option value="1">1px</option>
<option value="3">3px</option>
<option value="5">5px</option>
</select>
</div>
<div class="color-palette">
<div class="color-swatch" style="background-color: black"></div>
<div class="color-swatch" style="background-color: red"></div>
<div class="color-swatch" style="background-color: green"></div>
<div class="color-swatch" style="background-color: blue"></div>
</div>
使用CSS進行樣式設置:
.toolbar {
margin-bottom: 12px;
}
.toolbar button {
padding: 10px;
margin-right: 7px;
background: white;
color: black;
border: none;
cursor: pointer;
}
.color-palette {
display: flex;
justify-content: center;
margin-bottom: 12px;
}
.color-palette .color-swatch {
width: 32px;
height: 32px;
border: 3px solid white;
cursor: pointer;
margin-right: 6px;
}
.status-bar {
padding: 7px;
background: white;
color: black;
}
結果:
上面的例子包括了創建繪圖應用所需的結構和樣式,包括工具欄(帶有不同工具的按鈕,如鉛筆、畫筆、橡皮擦)、顏色調色板、畫筆大小選擇下拉菜單、繪圖畫布、狀態欄和清除按鈕。您可以根據所需的功能自定義這些元素。
沒有JavaScript功能,上述示例中的按鈕、顏色樣本和清除按鈕將不會執行任何操作。要使用繪圖應用程序,您必須添加相應的JavaScript源代碼來處理功能和與畫布元素的交互。以下是您可以使用JavaScript處理畫布元素功能和交互的幾種方式:
const canvas=document.getElementById("myCanvas");
const context=canvas.getContext("2d");
const canvas=document.getElementById("myCanvas");
const ctx=canvas.getContext("2d");
let isDrawing=false;
let selectedTool="pencil";
function startDrawing(event) {
isDrawing=true;
draw(event);
}
function draw(event) {
if (!isDrawing) return;
const x=event.clientX - canvas.offsetLeft;
const y=event.clientY - canvas.offsetTop;
ctx.lineTo(x, y);
ctx.stroke();
}
function stopDrawing() {
isDrawing=false;
ctx.beginPath();
}
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
const clearButton=document.getElementById("clearButton");
clearButton.addEventListener("click", function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
const colorSwatches=document.querySelectorAll(".color-swatch");
colorSwatches.forEach((swatch)=> {
swatch.addEventListener("click", function() {
const color=this.style.backgroundColor;
ctx.strokeStyle=color;
});
});
const brushSizeSelect=document.getElementById("brushSize");
brushSizeSelect.addEventListener("change", function() {
const brushSize=this.value;
ctx.lineWidth=brushSize;
});
const pencilToolButton=document.getElementById("pencilTool");
pencilToolButton.addEventListener("mousedown", function() {
selectedTool="pencil";
ctx.globalCompositeOperation="source-over";
});
const brushToolButton=document.getElementById("brushTool");
brushToolButton.addEventListener("mousedown", function() {
selectedTool="brush";
ctx.globalCompositeOperation="multiply";
});
const eraserToolButton=document.getElementById("eraserTool");
eraserToolButton.addEventListener("mousedown", function() {
selectedTool="eraser";
ctx.globalCompositeOperation="destination-out";
});
const colorPicker=document.getElementById("colorPicker");
colorPicker.addEventListener("input", function() {
const color=this.value;
ctx.strokeStyle=color;
});
結果:
在上面的示例中,繪圖應用程序的功能被激活,您可以輕松地使用它來繪制您想要的內容。請注意,現在所有的元素都在正常工作,您可以在畫布上繪制,選擇不同的繪圖工具(鉛筆、畫筆、橡皮擦),選擇顏色,調整畫筆大小,并清除畫布。
JavaScript代碼指定了HTML文檔中的畫布元素,獲取了2D繪圖上下文,并在HTML文檔的各個元素上設置了事件監聽器,例如畫布、按鈕、顏色樣本和輸入字段。這些事件監聽器響應用戶的鼠標點擊、移動和值變化等操作。當觸發時,相應的JavaScript函數根據用戶的操作修改畫布繪圖上下文(ctx)。
它從HTML文檔中選擇清除按鈕并添加一個點擊事件監聽器。當點擊時,它使用2D繪圖上下文的clearRect方法清除整個畫布。例如,當您在畫布上點擊并拖動鼠標時,將調用 startDrawing 、 draw 和 stopDrawing 函數,這些函數跟蹤鼠標坐標并在畫布上繪制線條。
一款繪圖應用程序允許您使用上述工具和功能創建數字藝術作品。它為用戶提供了一個畫布,可以繪制、繪畫和應用不同的效果,以創建視覺組合。繪圖應用程序被藝術家、設計師、愛好者和任何對通過創建視覺吸引人的插圖、繪畫、素描和其他數字藝術形式來表達創造力感興趣的人使用。
將HTML5畫布繪制保存為圖像文件可幫助您與他人分享繪畫或在其他應用程序中使用。用戶可以將繪畫存儲在本地設備上,或通過提供將其保存為圖像文件的選項,將其上傳到各種平臺,如社交媒體、網站或在線畫廊。
此外,保存繪畫使用戶能夠稍后重新訪問和展示他們的創作,增強了繪畫應用程序的可用性和價值。以下是如何將HTML5畫布繪制保存為圖像文件的方法:使用JavaScript,您可以將畫布繪制保存為圖像文件。使用畫布元素的 toDataURL() 方法。該方法將畫布內容轉換為數據URL,可用于創建圖像文件。例如:
<button id="saveButton">Save</button>
const canvas=document.getElementById('myCanvas');
const link=document.createElement('a');
function saveCanvasAsImage() {
const dataURL=canvas.toDataURL('image/png');
link.href=dataURL;
link.download='drawing.png';
link.click();
}
saveCanvasAsImage();
在上面的示例中,添加了一個具有id“saveButton”的新按鈕元素,并添加了一個點擊事件監聽器。當您點擊“保存”按鈕時,它會觸發一個函數,該函數使用 toDataURL() 來檢索畫布的數據URL。然后,它創建一個動態生成的鏈接元素,將數據URL設置為href屬性,并使用download屬性指定所需的文件名為“drawing.png”,以啟動圖像文件下載。
該方法支持不同的圖像格式,如PNG、JPEG和GIF。您可以通過修改所需文件的類型(例如JPEG格式的'image/jpeg')來更改格式。保存后,您可以通過電子郵件、消息應用程序或社交媒體平臺分享圖像文件。
利用HTML5畫布的繪圖應用為藝術家、設計師、教育工作者和所有具有創造力的人打開了無限的可能性。無論是作為獨立工具還是集成到其他應用程序中,繪圖應用都賦予用戶表達創造力、與他人分享作品和探索視覺表達的新領域的能力。憑借其豐富的功能,繪圖應用在藝術創作中繼續激發和取悅用戶。所以拿起你的數字畫筆,在可能性的畫布上盡情釋放你的想象力吧!
由于文章內容篇幅有限,今天的內容就分享到這里,文章結尾,我想提醒您,文章的創作不易,如果您喜歡我的分享,請別忘了點贊和轉發,讓更多有需要的人看到。同時,如果您想獲取更多前端技術的知識,歡迎關注我,您的支持將是我分享最大的動力。我會持續輸出更多內容,敬請期待。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。