国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

canvas.width和canvas.style.width區別以及應用

付永剛 / 2181人閱讀

摘要:今天講的內容是和的區別,在沒有做項目之前,其實我是并沒有深入了解過這兩個屬性的,最近在研究項目的自適應問題,尤其是在中置入圖片,碰到了圖片模糊的問題,這些雜癥都是和文章要講的有關系。最后,當我們不指定的真實大小時,默認按照處理。

今天講的內容是canvas.width和canvas.style.width的區別,在沒有做canvas項目之前,其實我是并沒有深入了解過這兩個屬性的,最近在研究canvas項目的自適應問題,尤其是在canvas中置入圖片,碰到了圖片模糊的問題,這些“雜癥”都是和文章要講的canvas.width/canvas.style.width有關系。

canvas.width/canvas.style.width概覽

先看一下這個例子: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");
}
 

效果圖

我們來看第一個canvas,指定了canvas的大小,并未指定canvas.style的大小,那么畫布就是實實在在是100*100大小,我們JS代碼中,也是在畫一條從(0,0)到(100, 100)的對角線。第一個完全沒有問題

第二個canvas,canvas本身以及canvas.style都進行了定義,從定義可以看到canvas.style就是在將我們的畫布放大2倍,從圖也能看到,這條線指向對角沒問題,但是變粗了,這也證明了,canvas先是參考自己的本身畫布大小進行繪制,繪制完畢,由style指定的大小,渲染在瀏覽器頁面

第三個canvas,本身的canvas與canvas.style不成比例,html中并沒有顯示的聲明canvas本身的大小,只聲明了style的大小,那么這種情況下,canvas畫布本身的大小就是默認值300*150;那么我們依托300*150進行繪制,就像第四個純凈的canvas上的線條一樣繪制,繪制完畢后,要渲染到頁面,這個時候,還是和canvas2那個套路一樣,依據style指定的width,height進行縮放,狀態就由第四個canvas變成了第三個最后的樣子。我們來看一下公式:
默認大小300*150,style指定大小200*200


最后標準位置下的(100,100)就變成了在style下200*200的(66.7, 133.333)

最后一幅圖就是當不指定canvas大小時,默認的大小,標準的300*150

總結:舉了三個不同但是互相關聯的例子,通過這些,我們能了解,canvas本身是一個畫布,我們怎么理解畫布,決定了我們是否能正確的理解canvas.width和canvas.style.width的區別。canvas.width就是畫布真實的大小,這個畫布不是我們能看到的畫布,我們能看見的畫布,已經是在瀏覽器處理canvas.style.width/canvas.style.height之后,加工處理后的畫布。而cavnas.style.width/canvas.style.height決定了畫布以怎樣的形式進行縮放展示給頁面。轉換的比例就是上面兩個公式。最后,當我們不指定canvas的真實大小時,默認按照300*150處理。

canvas.width / canvas.height 表示畫布真實大小,其實我們并不可見

canvas.style.width / canvas.style.height 表示畫布輸出到瀏覽器我們可見的/最終的大小

不提供canvas真實大小時,默認按300*150處理,如果canvas.style也沒提供,那么style.width為空,注意并不是300*150

canvas圖片模糊的問題(待完善)

再講canvas圖片模糊的問題之前,我們可以看一下上面第二個canvas,真實大小與樣式指定的大小是呈2倍關系,最后我們的線條也是放大2倍,大家要注意一個概念,canvas繪制是以自己真實大小來定位&繪制的,最后由瀏覽器渲染到頁面可見時,由canvas.style.width/cavnas.style.height決定的

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98734.html

相關文章

  • 我從 fabric.js 中學到了什么

    摘要:前言熟悉的朋友想必都使用或者聽說過,算是一個元老級的庫了,從第一個版本發布到現在,已經有年時間了。中緩存是默認開啟的,同時也可以設置為禁用。處理屏屏幕模糊的問題,直接給出處理方法,就不展開說了。 前言 熟悉 canvas 的朋友想必都使用或者聽說過 Fabric.js,Fabric 算是一個元老級的 canvas 庫了,從第一個版本發布到現在,已經有 8 年時間了。我近一年時間也在項目...

    oogh 評論0 收藏0
  • 使用canvas繪制圓弧動畫

    摘要:即,把放大為倍時,顯示效果會被拉伸當不設置樣式寬高時,瀏覽器中大小由畫布大小決定在實際開發中,碰到一個例外,是在使用時,繪制的標簽如果只設置畫布大小時,在移動端的瀏覽器上顯示異常,正常。回到圓弧動畫,當前動畫有兩段,以順時針方向這段為例。 效果預覽 showImg(https://segmentfault.com/img/bVbm7UY?w=502&h=304); canvas 繪制基...

    Kyxy 評論0 收藏0
  • 實現Google帶截圖功能的web反饋插件

    摘要:谷歌是通過來實現這個組件的,比較復雜谷歌的工具加載文件和截圖文件有興趣的同學可以看一下。高亮區域核心部分截圖搞定了,接下來就是高亮區域了。 幾乎所有的APP應用包括Web應用都需要一個意見反饋,這樣才能了解用戶對產品的意見和建議,以便于不斷提升完善自己的產品。目前的反饋組件一般有兩種,一種是打開一個反饋頁面填寫表單,另一種則是通過彈窗來完成,相比較而言第二種更加方便,而且更加容易組件化...

    freecode 評論0 收藏0

發表評論

0條評論

付永剛

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<