整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
獨的一個canvas標記只是在頁面中定義了一塊矩形區域，并無特別之處。開發人員只有配合使用javascript腳本，才能夠完成各種圖形、線條以及復雜的圖形變換操作。與基于SVG實現同樣繪圖效果來比較，canvas繪圖是一種像素級別的位圖繪圖技術，而SVG則是一種矢量繪圖技術。
使用canvas和javascript繪制一個矩形，可能會涉及一個或多個方法，如下表所示：
（1）編寫代碼如下圖所示，在<body>標簽中加入以下代碼。
（2）在瀏覽器中打開文件，預覽效果圖如下所示，可以看到網頁中，在一個藍色邊框中顯示了一個藍色長方形。
小提示：上面代碼中，首先定義一個畫布對象，其id名稱為myCanvas，其高度和寬度為500像素，并定義了畫布邊框顯示樣式。在javascript代碼中，首先獲取畫布對象，然后使用getcontext獲取當前2D的上下文對象。并使用fillrect繪制一個矩形。其中涉及一個fillstyle屬性，fillstyle用于設置填充的顏色、透明度等。如果設置為“rgb（200,0,0）”，則表示一個顏色，不透明；如果設置為“rgba（0,0,200,0.5）”，則表示顏色為一個顏色，透明度為50%。
數字時代，多媒體元素如視頻、音頻、圖片和動畫成為了網頁設計中不可或缺的一部分。它們不僅能夠提升用戶體驗，還能有效地傳達信息和情感。在本文中，我們將探討如何在網頁中嵌入各種多媒體元素，并提供一些例子來說明如何使用它們。
圖片是最常見的多媒體類型之一。在HTML中，我們使用 <img> 標簽來嵌入圖片。
<img src="example.jpg" alt="描述性文字" width="500" height="300">
在這個例子中，src 屬性指定圖片的路徑，alt 屬性提供圖片的替代文本（對于視覺障礙用戶和圖片無法加載的情況非常有用），width 和 height 屬性指定圖片的尺寸。
視頻可以提供動態的視覺體驗和信息。HTML5引入了 <video> 標簽，使得嵌入視頻變得簡單。
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持視頻標簽。
</video>
在這個例子中，controls 屬性添加了視頻播放控件，如播放、暫停和音量控制。<source> 標簽允許指定多個視頻格式，以確保跨不同瀏覽器的兼容性。
音頻元素可以用來播放聲音或音樂。HTML5通過 <audio> 標簽提供了對音頻內容的支持。
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
您的瀏覽器不支持音頻元素。
</audio>
與視頻標簽類似，controls 屬性為音頻文件提供了基本的控制選項，而 <source> 標簽讓我們可以指定多個音頻格式。
除了直接嵌入文件，我們還可以嵌入整個網頁或者其他網站的內容，比如地圖或社交媒體帖子。這通常是通過 <iframe> 標簽完成的。
<iframe src="https://www.example.com" width="600" height="400">
<p>您的瀏覽器不支持iframe標簽。</p>
</iframe>
在這個例子中，src 屬性指定了要嵌入的網頁的URL，width 和 height 屬性設置了iframe的尺寸。
SVG（可縮放矢量圖形）和Canvas API是創建網頁動畫和圖形的兩種流行技術。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
這個SVG示例創建了一個簡單的帶有綠色邊框和黃色填充的圓。
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
這個Canvas示例使用JavaScript在畫布上繪制了一個紅色的矩形。
我們還可以嵌入社交媒體平臺上的內容，如推文或Instagram帖子。
<!-- Twitter -->
<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- Instagram -->
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/B1JWcqCgsdH/">
</blockquote>
<script async defer src="//www.instagram.com/embed.js"></script>
這些例子展示了如何嵌入Twitter和Instagram的內容。通常，社交媒體平臺提供了易于嵌入內容的代碼片段。
嵌入多媒體元素可以極大地提升網站的吸引力和互動性。通過使用HTML的 <img>, <video>, <audio>, <iframe>, <svg> 和 <canvas> 標簽，我們可以在網頁中添加豐富的視覺和聽覺內容。此外，社交媒體的嵌入功能使得分享和展示社交媒體內容變得簡單。當設計包含多媒體元素的網頁時，記得考慮到所有用戶的訪問性，確保內容對所有人都是可訪問的。
在閱讀本文前，你首先需要知道什么是 Fabric.js，還需要知道 Fabric.js 是如何創建矩形的。
如果你還沒滿足上面2個條件，推薦閱讀 《Fabric.js從入門到____》
我在 Fabric.js 使用 框選操作 創建矩形。
接下來的幾篇文章我會寫如何自由繪制 圓形、橢圓形、三角形、線段、折線、多邊形。
本文不做任何 CSS 相關的美化，只講解實現原理。
下圖是本文的要實現的效果。
使用 Fabric.js 這類框架，是要注意版本的。
本文所用版本： Fabric.js 4.6.0
用 “框選” 的方式生成矩形，其核心就2點：
鼠標點擊：canvas.on('mouse:down', fn)
鼠標抬起: canvas.on('mouse:up', fn)
理解了上面的核心點，接下來需要考慮的是鼠標框選的 方向 。
上面這4種情況會影響生成出來的矩形的 長、寬 和 位置。
生成矩形的代碼
new fabric.Rect({
top: 0, // 矩形左上角在y軸的位置
left: 0, // 矩形左上角在x軸的位置
width: 100, // 矩形的寬
height: 100, // 矩形的高
fill: 'transparent', // 填充色
stroke: '#000' // 邊框顏色
})接下來逐一說說這4種操作帶來的影響。
這種情況是最好處理的。
此時 起始點 就是矩形的左上角，結束點 就是矩形的右下角。
起始點 的 x 和 y 坐標 都小于 結束點，（ 起始點x < 結束點x；起始點y < 結束點y ） ：
起始點x > 結束點x； 起始點y > 結束點y
起始點x < 結束點x； 起始點y > 結束點y
起始點x > 結束點x； 起始點y < 結束點y
分析完上面4種情況，最后總結出來這幾個參數的公式。
我將 起始點 命名為 downPoint，結束點 命名為 upPoint 。
矩形的幾個參數計算公式如下：
new fabric.Rect({
top: Math.min(downPoint.y, upPoint.y),
left: Math.min(downPoint.x, upPoint.x),
width: Math.abs(downPoint.x - upPoint.x),
height: Math.abs(downPoint.y - upPoint.y),
fill: 'transparent',
stroke: '#000'
})Math.min：兩者之中取小值
Math.abs：返回絕對值
這兩個都是 JS 提供的方法，如果不理解的建議去百度一下。
我在這里貼出用 原生方式 實現的代碼和注釋。
如果你想知道在 Vue3 環境下如何實現 Fabric.js 自由繪制矩形，可以在 代碼倉庫 里查找。
<!-- 工具欄 -->
<div class="toolbar">
<select onchange="typeChange(this.options[this.options.selectedIndex].value)">
<option value="default">默認（框選）</option>
<option value="rect">矩形</option>
</select>
</div>
<!-- 畫布 -->
<canvas id="canvas" width="800" height="800"></canvas>
<!-- 引入fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.js"></script>
<script>
let canvas=null // 畫布對象
let currentType='default' // 當前操作模式（默認 || 創建矩形）
let downPoint=null // 按下鼠標時的坐標
let upPoint=null // 松開鼠標時的坐標
// 初始化畫板
function initCanvas() {
canvas=new fabric.Canvas('canvas')
canvas.on('mouse:down', canvasMouseDown) // 鼠標在畫布上按下
canvas.on('mouse:up', canvasMouseUp) // 鼠標在畫布上松開
}
// 畫布操作類型切換
function typeChange(opt) {
currentType=opt
switch(opt) {
case 'default': // 默認框選模式
canvas.selection=true // 允許框選
canvas.selectionColor='rgba(100, 100, 255, 0.3)' // 選框填充色：半透明的藍色
canvas.selectionBorderColor='rgba(255, 255, 255, 0.3)' // 選框邊框顏色：半透明灰色
canvas.skipTargetFind=false // 允許選中
break
case 'rect': // 創建矩形模式
canvas.selectionColor='transparent' // 選框填充色：透明
canvas.selectionBorderColor='rgba(0, 0, 0, 0.2)' // 選框邊框顏色：透明度很低的黑色（看上去是灰色）
canvas.skipTargetFind=true // 禁止選中
break
}
}
// 鼠標在畫布上按下
function canvasMouseDown(e) {
// 鼠標左鍵按下時，將當前坐標 賦值給 downPoint。{x: xxx, y: xxx} 的格式
downPoint=e.absolutePointer
}
// 鼠標在畫布上松開
function canvasMouseUp(e) {
// 繪制矩形的模式下，才執行下面的代碼
if (currentType==='rect') {
// 松開鼠標左鍵時，將當前坐標 賦值給 upPoint
upPoint=e.absolutePointer
// 調用 創建矩形 的方法
createRect()
}
}
// 創建矩形
function createRect() {
// 如果點擊和松開鼠標，都是在同一個坐標點，不會生成矩形
if (JSON.stringify(downPoint)===JSON.stringify(upPoint)) {
return
}
// 創建矩形
// 矩形參數計算（前面總結的4條公式）
let top=Math.min(downPoint.y, upPoint.y)
let left=Math.min(downPoint.x, upPoint.x)
let width=Math.abs(downPoint.x - upPoint.x)
let height=Math.abs(downPoint.y - upPoint.y)
// 矩形對象
const rect=new fabric.Rect({
top,
left,
width,
height,
fill: 'transparent', // 填充色：透明
stroke: '#000' // 邊框顏色：黑色
})
// 將矩形添加到畫布上
canvas.add(rect)
// 創建完矩形，清空 downPoint 和 upPoint。當然，你也可以不做這步。
downPoint=null
upPoint=null
}
// 頁面加載的生命周期，在此執行 初始化畫布 的操作
window.onload=function() {
initCanvas()
}
</script>最后別忘了 關注 點贊 收藏
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
