1. 程式人生 > >html5 canvas影象在谷歌瀏覽器下不顯示問題

html5 canvas影象在谷歌瀏覽器下不顯示問題

使用drawImage方法在canvas下繪圖,在谷歌瀏覽器下需要加onload事件

同時,注意定義canvas畫布大小不能使用CSS設定,它會導致畫布按比例縮放你設定的值。(原因:在Canvas元素的內部存在一個名為2d渲染環境(2d redering context)的物件,所以,通過CSS設定畫布尺寸會引起奇怪的效果。

正確方式為:

一、在HTML頁面中設定:

        <canvas id="myCanvas" width="600px" height="500px" style="border:1px solid #c3c3c3;"></canvas>

二、通過JS設定:

varc = document.getElementById("myCanvas");
c.width = 600;
c.height = 500;

<span style="font-size:18px;color:#330033;"><!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>MAD</title>
</head>
<body>
	<canvas id="myCanvas" width="600px" height="500px" style="border:1px solid #c3c3c3;"></canvas>
	<script>
		var	c = document.getElementById("myCanvas");
		var	cxt = c.getContext("2d");
		var img1 = new Image();
		img1.src = "pic/search.jpg";
		var img2 = new Image();
		img2.src = "pic/model.jpg";
		img1.onload=function(){  
    		cxt.drawImage(img1,0,0);  
		};  
		img2.onload=function(){  
    		cxt.drawImage(img2,250,186);
		}; 
		cxt.drawImage(img1,0,0);
		cxt.drawImage(img2,250,186);
	</script>
</body>
</html></span>

相關推薦

html5 canvas影象瀏覽器顯示問題

使用drawImage方法在canvas下繪圖,在谷歌瀏覽器下需要加onload事件 同時,注意定義canvas畫布大小不能使用CSS設定,它會導致畫布按比例縮放你設定的值。(原因:在Canvas元素的內部存在一個名為2d渲染環境(2d redering context)

如何去除input框在瀏覽器的黃色底紋

    現象:谷歌瀏覽器下input框有預設記住功能,此時若選擇了歷史輸入的內容,則變成如下圖;非歷史輸入,是沒有的。    方法一 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px whi

關於CSS中 用“rem" 在瀏覽器的問題

rem是css3新定義的設定字型大小屬性,常用的兩種字型大小設定有下面2種:1、 px為單位2、em為單位(百分比用法跟em類似) PX為單位 在Web頁面初期製作中,我們都是使用“px”來設定我們的文字,因為他比較精確和固定。只要頁面某元素設定了px字型大小,其子

Tomcat的Gzip設定以及瀏覽器無法訪問系統盤中靜態檔案的問題

找到TOMCAT根目錄,在conf資料夾裡開啟server.xml檔案,將 <Connector port="80" protocol="HTTP/1.1"                connectionTimeout="20000"              

瀏覽器為什麼能自動儲存賬戶密碼?

一般瀏覽器都會提供自動儲存賬戶以及密碼的功能,方便我們下次的登入。 但今天筆者在使用谷歌瀏覽器進行網站測試時,每次都得自己輸入賬戶密碼,瀏覽器並沒有提醒是否儲存此密碼。 這給我的除錯工作帶來了極大的不便。 一般這種問題,都屬於設定的問題。 樓主在設定終於找到了問題所在。如圖

Visual Studio 2017 開啟瀏覽器除錯成功,其它瀏覽器除錯成功!出現能連線到執行時程序,求解答!

Cannot connect to runtime process,timeout after 10000 ms-(reason:Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:55236). 不能連

Video標籤播放視訊?瀏覽器?safari?? 瀏覽器播放了mp4格式的視訊的原因

webm格式和mp4格式,判斷了瀏覽器能否支援的視訊型別後,給了一個if判斷,如果是支援mp4格式,就返回視訊字尾mp4,如果是webm,就返回字尾webm。結果,在谷歌瀏覽器中播放不了,為什麼我指定源為webm格式的視訊時,谷歌瀏覽器毫無錯誤的播放了,但是,如果是使用if判

ubuntuChrome瀏覽器部分網站圖片顯示正常的解決方法

lse 刷新 false 設置 rom chrom ubunt 谷歌 分網 title: ubuntu下Chrome谷歌瀏覽器部分網站圖片顯示不正常的解決方法 toc: false date: 2018-09-02 14:37:26 categories: method

瀏覽器提示Adobe flash player是最新版本的解決方法

png per style bsp pla 重啟 mage mrm 管家 參考資料 https://jingyan.baidu.com/article/a3a3f811c3d5058da2eb8a39.html 如果電腦裏面有安裝各種軟件管家助手之類的的可以直接在

ubuntu(linux)瀏覽器跨域問題,XMLhttprequest跨域問題

replace mod class req box tps 圖片 ebs nal ubuntu(linux)下谷歌瀏覽器跨域問題 今天在使用谷歌瀏覽器實時調試代碼的時候遇到這樣的錯誤: XMLHttpRequest cannot load http:/

Ubuntu安裝瀏覽器命令

googl 獲得 rom 谷歌瀏覽器 www -i 快捷 文章 ref 轉載:http://www.linuxidc.com/Linux/2013-10/91857.htm 對於剛剛開始使用Ubuntu並想安裝谷歌Chrome瀏覽器的新用戶來說,本文所介紹的方法是最快捷的。

解決html5新標簽 placeholder 低版本瀏覽器兼容問題

解決 html5 新標簽 placeholder屬性是HTML5 中為input添加的。在input上提供一個占位符,文字形式展示輸入字段預期值的提示信息(hint),該字段會在輸入為空時顯示。實例:1 <input type="text" name="userName" placehold

瀏覽器字體小於12px能正常顯示bug

瀏覽器支持 gpo nsf pan 字體 最小 webkit post style google瀏覽器支持的最小字體是12px,當字體小於12px時還是只能顯示12px; p{ font-size: 8px; -webkit-t

關於瀏覽器能及時預覽修改後的js檔案的問題

環境說明:MyEclipse 10 在解決該問題前,應該完成的步驟(個人建議):      1.確認js檔案編碼是您需要的(以我的專案為例,截圖說明)    在我的專案中,為了避免亂碼的問題,我將涉及到的所有字符集都設定為“utf-8”    ①jsp檔案   ②js檔

win7設定自啟動的兩種方式(瀏覽器自啟動並預設全屏展示需要按F11)

功能需求:win7系統需要設定谷歌瀏覽器自啟動,然後進入一個頁面進行播放展示,預設的是瀏覽器全屏。 首先第一步設定自啟動兩種方法: 方法1: win7系統在開始選單中找到名稱為:啟動 也有可能叫(Startup)的資料夾,然後把谷歌瀏覽器複製貼上到這個資料夾中。正常情況下這個辦法就可以了

【開發除錯】瀏覽器中除錯移動網頁和測試網速頁面效果

、    今天有幸給大家分享一下谷歌瀏覽器針對移動網頁測試的技巧,主要是最近做個微信公共號網站。所以就要對頁面測試拉。移動網頁我們最長測得就是各種手機大小的頁面效果和出現網路問題的效果展示。 今天就簡單分享下在谷歌瀏覽器測試頁面的適配和網速限制展示。 頁面的適配 自帶的手機模式 首先開啟谷歌瀏覽器按F

ionic1 接入百度或者高德地圖 移動端顯示 pc端瀏覽器正常的問題解決

這個問題困擾了我三天!!! 火大!!!!!! 百度別人,什麼api換成getscript,加scroll='false'...  各種操作,毛用沒有。 看程式碼沒有任何問題,該引入的都引了,js部分try catch 下  移動端報錯 AMap(BMap) is not de

js獲取當前系統是是win7,相容ie,火狐,瀏覽器 的阻止事件冒泡

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="http:/

瀏覽器和internet explorer所有網頁打開,而Edge瀏覽器卻可以開啟網頁

我由於安裝Visualbox進行hadoop分散式環境搭建導致了題目中的問題,經過網上查閱資料,才知道原來是LSP異常所致。只需要在命令列視窗中輸入下面命令: netsh winsock reset

本地使用js或jquery操作cookie在瀏覽器chrome中生效

新手學習js或jquery時,一般是在本地除錯(前端學習一般用不到伺服器端),當學習到cookie一節時,在谷歌瀏覽器chrome中除錯居然不生效!!!不管是使用jquery的cookie外掛,還是js原生態的cookie方法都不生效!!!什麼原因呢?原因在於chrome不支援js在本地操作cookie!據測