1. 程式人生 > >js設定canvas的寬高(動態設定canvas的寬高)

js設定canvas的寬高(動態設定canvas的寬高)

設定canvas的寬高有兩種方式:

    1:在html的canvas標籤中設定寬高

	<body>
		
		<canvas id="canvas" width="300" height="300"></canvas>
		
	</body>

     2:在js中設定canvas的寬高

注意:在js中設定canvas的寬高時,如果設定方式不正確,或者在cass中設定時,在繪製圖像時就會出現拉伸的情況。這是因為canvas的預設寬高為300px*150px,在css中設定canvas的寬高,實際上是把canvas在300px*150px的基礎上進行了拉伸。所以繪製出來的影象會發生變形。

在js中設定canvas的寬高時應當使用以下方法:

			document.getElementById("canvas").width = 600;
			document.getElementById("canvas").height = 600;

    3:在js中動態建立canvas

程式碼如下:

html:

<div id="canvas_box"></div>
js:
			window.onload = function(){
			var canvas = document.createElement("canvas");
			canvas.style.border = "solid 1px red";
			canvas.id = "canvas";
			var box = document.getElementById("canvas_box");
			box.appendChild(canvas);
			
			//設定寬高一定要在canvas節點新增之後
			document.getElementById("canvas").width = 600;
			document.getElementById("canvas").height = 600;
	
			}


相關推薦

js設定canvas動態設定canvas

設定canvas的寬高有兩種方式:     1:在html的canvas標籤中設定寬高 <body> <canvas id="canvas" width="300" he

Android螢幕適配3-動態獲取螢幕動態設定控制元件

1、問題 在螢幕適配中,要求應用在不同的螢幕上顯示一樣的效果時,我們的佈局可以採用百分比來定位,也就是 layout_weight,但對於一些層層巢狀或更加複雜的情況下,使用百分比的效果並不是很好,頁無法解決一些問題,比如文字大小。 2、解決思路 我們

android螢幕適配的全攻略3-動態獲取手機螢幕動態設定控制元件

1.獲取手機螢幕寬高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); int screenWidth = dm.width

HTML5利用canvas壓縮圖片不改變圖片

最近專案中有一個手機拍照上傳的需求,現在的智慧手機攝像頭畫素很高,拍出來的照片大小大都在5M左右,當手機在上傳圖片時遇到了問題,之前採用的方法是將圖片先進行Base64編碼,然後上傳到伺服器,結果因為圖片太大,導致伺服器老是回覆超時錯誤;權衡之下決定在圖片上傳之前先將圖片壓縮; 以下為我採用方法

6、js控制,設定圖片跟隨視窗主要是根據高度變化大小變化,按比例縮放

html: <div class="container"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545633786675&a

GridView的getChildAt(postion)獲取不到指定位置的item的解決方法動態設定指定item為選中狀態

問題描述: 有時候需要在GridView中設定某一個item為預設選中狀態,對應做一些處理, 最方便的自然是用getChildAt(postion)方法直接獲取item的view進行設定就行了 但是很多時候這個方法返回的view為null

使RibbonBar中的Button不可用動態設定CMFCRibbonBar狀態

設定RibbonBar中的button響應函式ON_UPDATE_COMMAND_UI void CMainFrame::OnUpdateStopedit(CCmdUI *pCmdUI) {

CentOS7設定資料夾共享基於VMWare Workstation 14 Pro

1、開啟VMWare Workstation 14 Pro,選單欄找到“虛擬機器(M)”,點選,下拉選單依次選擇“設定”、“選項”,點選“共享資料夾”,在“資料夾共享”下選擇“總是啟用”,“資料夾(F)”可選擇任意路徑下的資料夾; 2、不能建立共享資料夾的解決辦法: 1)選單欄找到“

scrapy中設定IP代理池自定義IP代理池

首先主要的就是你應該對scrapy目錄結構,有一個相對清晰的認識,至少有過一個demo 一、手動更新IP池 1.在settings配置檔案中新增IP池: IPPOOL=[ {"ipaddr":"61.129.70.131:8080"}, {"ipaddr":"61.152

pycharm 程式碼設定自動換行Ubuntu裡的pycharm一樣

適用於分屏操作-----類似於下面這種,螢幕小啊,只能一半一半嘍 操作步驟: File-----Settings…-------Settings------Editor------General ------Soft Wraps--------- Use soft wraps in e

CentOS7設定開機啟動方式圖形介面/命令列介面

CentOS 7由於使用systemd而不是init,所以不能通過修改inittab檔案來修改開機啟動模式。 先使用ctrl+alt+f2切換到命令列模式,然後輸入命令:systemctl set-default multi-user.target 對應

在IDEA中設定方法自動註釋帶引數和返回值

第一部分 設定 開啟設定面板    新建 線上模板 新建自動新增規則,注意 這裡觸發的字元 不能隨便寫 必須為 *   Template text 區域 看上去有點亂,但是是為了顯示時的對齊,該區域的內容如下(空格之類的不要亂動): *

Android如何程式設計設定APP安裝位置外部儲存或內部儲存

Beginning with API Level 8, you can allow your application to be installed on the external storage (for example, the device's SD card).

DEDECMS頻道如何設定為二級域名dedecms開啟二級域名 方法

DEDECMS功能強大,做站群也OK,但是隻能以頻道的方法去實現。 下面就說一下如何啟用二級域名吧,主要是大站,內容較多的時候用到,二級域名是什麼我就不多說了第一步 先進行欄目設定,需要把欄目設定為頻道,欄目儲存目錄也要注意一下,一般設定成一級目錄目錄,比如我這裡設定的是根

jmeter設定引數的方法隨機,讀csv等

本文為整理jmeter設定引數的方法 設定引數值的方法有如下幾種: 1. 用Jmeter中的函式獲取引數值,__Random,__threadNum,__CSVRead,__StringFrom

【工具設定】usb001 usb002 Virtual Printer Port for USB 有什麼區別 印表機驅動裝不上 沒有usb001

http://blog.sina.com.cn/s/blog_5e4ec4e101017df7.html usb001 usb002 (Virtual Printer Port for USB) 與之並列的LTP1(推薦的印表機埠)都是真實的,在機箱背面能找得到

Android EditText 設定密碼可見性檢視密碼按鈕的實現

/** * 檢視密碼 * @param v */ public static void Hidden(EditText v) { if (v.get

【okhttp】Post請求設定utf-8編碼解決漢語請求亂碼問題

 如果用FormBody 傳送post表單請求,就不能設定編碼格式,contentType方法沒有暴露出來,預設也不是UTF-8,引數是漢字就會亂碼。 所以換一種方式 ,用   RequestBody

cocos2d-js動作模塊使用自用,只有代碼

his ews btn enc 自用 ota req visible svi // var UIBase = require("src/views/ui/UIBase.js")// cc.loader.loadJs("src/views/ui/UIBase.js")var

DHCP動態主機獲取IP地址

動態主機獲取ip地址動態 IP地址下放過程:1、主機發送DHCP discover包發現DHCP服務器2、DHCP服務器發送DHCP offer包發送IP地址通過逆向ARP將IP地址解析成MAC地址,進行廣播,收到該MAC地址的回應證明IP地址已被占用,沒有收到證明該IP可以使用3、主機通過DHCP requ