資訊專欄INFORMATION COLUMN
摘要：今天講的內(nèi)容是和的區(qū)別，在沒有做項(xiàng)目之前，其實(shí)我是并沒有深入了解過這兩個(gè)屬性的，最近在研究項(xiàng)目的自適應(yīng)問題，尤其是在中置入圖片，碰到了圖片模糊的問題，這些雜癥都是和文章要講的有關(guān)系。最后，當(dāng)我們不指定的真實(shí)大小時(shí)，默認(rèn)按照處理。
今天講的內(nèi)容是canvas.width和canvas.style.width的區(qū)別，在沒有做canvas項(xiàng)目之前，其實(shí)我是并沒有深入了解過這兩個(gè)屬性的，最近在研究canvas項(xiàng)目的自適應(yīng)問題，尤其是在canvas中置入圖片，碰到了圖片模糊的問題，這些“雜癥”都是和文章要講的canvas.width/canvas.style.width有關(guān)系。
canvas.width/canvas.style.width概覽先看一下這個(gè)例子：https://codepen.io/parkeeers/...
// JavaScript
function drawDiagonal(id) {
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 100);
context.stroke();
}
window.onload = function() {
drawDiagonal("diagonal1");
drawDiagonal("diagonal2");
drawDiagonal("diagonal3");
drawDiagonal("diagonal4");
}
效果圖
我們來看第一個(gè)canvas，指定了canvas的大小，并未指定canvas.style的大小，那么畫布就是實(shí)實(shí)在在是100*100大小，我們JS代碼中，也是在畫一條從（0，0）到（100， 100）的對(duì)角線。第一個(gè)完全沒有問題
第二個(gè)canvas，canvas本身以及canvas.style都進(jìn)行了定義，從定義可以看到canvas.style就是在將我們的畫布放大2倍，從圖也能看到，這條線指向?qū)菦]問題，但是變粗了，這也證明了，canvas先是參考自己的本身畫布大小進(jìn)行繪制，繪制完畢，由style指定的大小，渲染在瀏覽器頁(yè)面
第三個(gè)canvas，本身的canvas與canvas.style不成比例，html中并沒有顯示的聲明canvas本身的大小，只聲明了style的大小，那么這種情況下，canvas畫布本身的大小就是默認(rèn)值300*150；那么我們依托300*150進(jìn)行繪制，就像第四個(gè)純凈的canvas上的線條一樣繪制，繪制完畢后，要渲染到頁(yè)面，這個(gè)時(shí)候，還是和canvas2那個(gè)套路一樣，依據(jù)style指定的width，height進(jìn)行縮放，狀態(tài)就由第四個(gè)canvas變成了第三個(gè)最后的樣子。我們來看一下公式：
默認(rèn)大小300*150，style指定大小200*200
最后標(biāo)準(zhǔn)位置下的（100，100）就變成了在style下200*200的（66.7， 133.333）
最后一幅圖就是當(dāng)不指定canvas大小時(shí)，默認(rèn)的大小，標(biāo)準(zhǔn)的300*150
總結(jié)：舉了三個(gè)不同但是互相關(guān)聯(lián)的例子，通過這些，我們能了解，canvas本身是一個(gè)畫布，我們?cè)趺蠢斫猱嫴?，決定了我們是否能正確的理解canvas.width和canvas.style.width的區(qū)別。canvas.width就是畫布真實(shí)的大小，這個(gè)畫布不是我們能看到的畫布，我們能看見的畫布，已經(jīng)是在瀏覽器處理canvas.style.width/canvas.style.height之后，加工處理后的畫布。而cavnas.style.width/canvas.style.height決定了畫布以怎樣的形式進(jìn)行縮放展示給頁(yè)面。轉(zhuǎn)換的比例就是上面兩個(gè)公式。最后，當(dāng)我們不指定canvas的真實(shí)大小時(shí)，默認(rèn)按照300*150處理。
canvas.width / canvas.height 表示畫布真實(shí)大小，其實(shí)我們并不可見
canvas.style.width / canvas.style.height 表示畫布輸出到瀏覽器我們可見的/最終的大小
不提供canvas真實(shí)大小時(shí)，默認(rèn)按300*150處理，如果canvas.style也沒提供，那么style.width為空，注意并不是300*150
canvas圖片模糊的問題（待完善）再講canvas圖片模糊的問題之前，我們可以看一下上面第二個(gè)canvas，真實(shí)大小與樣式指定的大小是呈2倍關(guān)系，最后我們的線條也是放大2倍，大家要注意一個(gè)概念，canvas繪制是以自己真實(shí)大小來定位&繪制的，最后由瀏覽器渲染到頁(yè)面可見時(shí)，由canvas.style.width/cavnas.style.height決定的
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98734.html
摘要：前言熟悉的朋友想必都使用或者聽說過，算是一個(gè)元老級(jí)的庫(kù)了，從第一個(gè)版本發(fā)布到現(xiàn)在，已經(jīng)有年時(shí)間了。中緩存是默認(rèn)開啟的，同時(shí)也可以設(shè)置為禁用。處理屏屏幕模糊的問題，直接給出處理方法，就不展開說了。 前言 熟悉 canvas 的朋友想必都使用或者聽說過 Fabric.js，F(xiàn)abric 算是一個(gè)元老級(jí)的 canvas 庫(kù)了，從第一個(gè)版本發(fā)布到現(xiàn)在，已經(jīng)有 8 年時(shí)間了。我近一年時(shí)間也在項(xiàng)目...
摘要：即，把放大為倍時(shí)，顯示效果會(huì)被拉伸當(dāng)不設(shè)置樣式寬高時(shí)，瀏覽器中大小由畫布大小決定在實(shí)際開發(fā)中，碰到一個(gè)例外，是在使用時(shí)，繪制的標(biāo)簽如果只設(shè)置畫布大小時(shí)，在移動(dòng)端的瀏覽器上顯示異常，正常?；氐綀A弧動(dòng)畫，當(dāng)前動(dòng)畫有兩段，以順時(shí)針方向這段為例。 效果預(yù)覽 showImg(https://segmentfault.com/img/bVbm7UY?w=502&h=304); canvas 繪制基...
摘要：谷歌是通過來實(shí)現(xiàn)這個(gè)組件的，比較復(fù)雜谷歌的工具加載文件和截圖文件有興趣的同學(xué)可以看一下。高亮區(qū)域核心部分截圖搞定了，接下來就是高亮區(qū)域了。 幾乎所有的APP應(yīng)用包括Web應(yīng)用都需要一個(gè)意見反饋，這樣才能了解用戶對(duì)產(chǎn)品的意見和建議，以便于不斷提升完善自己的產(chǎn)品。目前的反饋組件一般有兩種，一種是打開一個(gè)反饋頁(yè)面填寫表單，另一種則是通過彈窗來完成，相比較而言第二種更加方便，而且更加容易組件化...
閱讀 1633·2021-11-02 14:42
閱讀 2403·2021-10-11 10:58
閱讀 730·2021-09-26 09:46
閱讀 2966·2021-09-08 09:35
閱讀 1493·2021-08-24 10:01
閱讀 1284·2019-08-30 15:54
閱讀 3663·2019-08-30 15:44
閱讀 1849·2019-08-30 10:49
