内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

H5canvas中width、height和style的寬高區(qū)別分析-創(chuàng)新互聯(lián)

小編給大家分享一下H5 canvas中width、height和style的寬高區(qū)別分析,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!

成都創(chuàng)新互聯(lián)一直在為企業(yè)提供服務(wù),多年的磨煉,使我們?cè)趧?chuàng)意設(shè)計(jì),全網(wǎng)整合營(yíng)銷(xiāo)推廣到技術(shù)研發(fā)擁有了開(kāi)發(fā)經(jīng)驗(yàn)。我們擅長(zhǎng)傾聽(tīng)企業(yè)需求,挖掘用戶對(duì)產(chǎn)品需求服務(wù)價(jià)值,為企業(yè)制作有用的創(chuàng)意設(shè)計(jì)體驗(yàn)。核心團(tuán)隊(duì)擁有超過(guò)10年以上行業(yè)經(jīng)驗(yàn),涵蓋創(chuàng)意,策化,開(kāi)發(fā)等專(zhuān)業(yè)領(lǐng)域,公司涉及領(lǐng)域有基礎(chǔ)互聯(lián)網(wǎng)服務(wù)四川樂(lè)山服務(wù)器托管、成都app軟件開(kāi)發(fā)、手機(jī)移動(dòng)建站、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)絡(luò)整合營(yíng)銷(xiāo)。

Canvas 的width height屬性

1、當(dāng)使用width height屬性時(shí),顯示正常不會(huì)被拉伸;如下

<canvas id="mycanvas" width="300" height="300">瀏覽器不支持Canvas,請(qǐng)升級(jí)或改用其它瀏覽器!</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("mycanvas"),
        ctx = canvas.getContext('2d');
    ctx.moveTo(0,0);
    ctx.lineTo(300,150);
    ctx.stroke();
</script>

運(yùn)行效果如下,為對(duì)角線

H5 canvas中width、height和style的寬高區(qū)別分析

2、使用style時(shí)圖像會(huì)被拉伸(變形),

<style>
         
        #mycanvas {
            width: 150px;
            height: 150px;
        }
    </style>

運(yùn)行效果

H5 canvas中width、height和style的寬高區(qū)別分析

如何理解???可以這么理解&mdash;&mdash;&mdash;&mdash;

Canvas 是一個(gè)畫(huà)板和一張畫(huà)紙,畫(huà)板相當(dāng)于一個(gè)容器,畫(huà)圖/作業(yè)是在畫(huà)紙上進(jìn)行的,

畫(huà)板和畫(huà)紙的默認(rèn)寬高是300*150,當(dāng)畫(huà)紙與畫(huà)板寬高相等時(shí),圖像不會(huì)被拉伸,當(dāng)畫(huà)紙與畫(huà)板寬高不一樣時(shí),圖像就會(huì)被拉伸(變形)。

1, width 和 height 屬性是設(shè)定畫(huà)板和畫(huà)紙的寬高,

如: width=”300” height=”300” 即畫(huà)板的寬高是300*300,畫(huà)紙的寬高也是300*300,作業(yè)的300*300 的對(duì)角線圖像就不會(huì)被拉伸

 H5 canvas中width、height和style的寬高區(qū)別分析

2, style樣式 里設(shè)定的是僅畫(huà)板的寬高,畫(huà)紙的寬高還是為默認(rèn)值300*150,

(以上圖為例)因此所作業(yè)的300*300的對(duì)角線圖像僅有一部分畫(huà)在畫(huà)紙上,如下:

H5 canvas中width、height和style的寬高區(qū)別分析

Btw 畫(huà)紙不會(huì)讓畫(huà)板就這么空出一片,于是畫(huà)紙連同圖像就要一起拉伸到跟畫(huà)板大小一樣。在此例子當(dāng)中,畫(huà)紙寬與畫(huà)板寬都為30,而高為畫(huà)板的一半,因此只需將高拉伸一倍即可,so 圖像也一起被拉伸變瘦,X方向不變,Y方向增至一倍, 所以就得到了變形之后的圖片

引用 //www.yisu.com/html5/643939.html 的一段總結(jié)

關(guān)于HTML5中Canvas的寬、高設(shè)置問(wèn)題
Canvas元素默認(rèn)寬 300px, 高 150px, 設(shè)置其寬高可以使用如下方法(不會(huì)被拉伸):
方法一:
       <canvas width="500" height="500"></canvas>
方法二:使用HTML5 Canvas API操作 OK
       var canvas = document.getElementById('欲操作canvas的id');
       canvas.width = 500;
       canvas.width = 500;
若通過(guò)如下方法設(shè)置寬高,那么Canvas元素將由原來(lái)大小被拉伸到所設(shè)置的寬高:
方法一:使用CSS 會(huì)被拉伸
     #欲操作canvas的id{
          width:1000px;
          height:1000px;
     }
方法二:使用HTML5 Canvas API操作 會(huì)被拉伸
      var canvas = document.getElementById('欲操作canvas的id');
      canvas.style.width = "1000px";
      canvas.style.height = "1000px";
方法三 :用jquery的$("#id").width(500);會(huì)被拉伸
其它:canvas的width和height也不能用百分比表示。canvas會(huì)將百分值當(dāng)成數(shù)值顯示

看完了這篇文章,相信你對(duì)“H5 canvas中width、height和style的寬高區(qū)別分析”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!

文章標(biāo)題:H5canvas中width、height和style的寬高區(qū)別分析-創(chuàng)新互聯(lián)
文章出自:http://m.rwnh.cn/article10/ggedo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開(kāi)發(fā)App設(shè)計(jì)、電子商務(wù)、App開(kāi)發(fā)、移動(dòng)網(wǎng)站建設(shè)、小程序開(kāi)發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化
怀化市| 宜宾市| 浮山县| 内丘县| 偏关县| 东乡族自治县| 汤阴县| 汉川市| 邵东县| 攀枝花市| 边坝县| 武夷山市| 共和县| 枣强县| 广州市| 原平市| 平谷区| 喀什市| 宁蒗| 桃源县| 上林县| 塘沽区| 淮南市| 水城县| 赣州市| 宁强县| 武乡县| 罗源县| 宾阳县| 呈贡县| 理塘县| 布尔津县| 怀化市| 临夏县| 乌鲁木齐县| 诸暨市| 云浮市| 寿宁县| 东宁县| 广平县| 长沙县|