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