html5使用canvas繪制一張圖片
發(fā)布時(shí)間:2014-12-15 16:32:06 作者:佚名
我要評(píng)論

這篇文章主要介紹了html5使用canvas繪制一張圖片,需要的朋友可以參考下
<canvas id="canvas" width="600" height="500" style="background-color: yellow;"></canvas>
復(fù)制代碼
代碼如下:var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var img=new Image();
img.src="cat.jpg";
cxt.drawImage(img,10,10,490,382);
/*
測試發(fā)現(xiàn)一個(gè)問題 在瀏覽器第一次執(zhí)行的時(shí)候經(jīng)??床坏綀D片,
在刷新一次后才能看到圖片,有誰知道這是什么原因的,麻煩大神告訴我一下啊
.呵呵
*/
相關(guān)文章
- 在html5中我覺得最重要的就是引入了Canvas,使得我們可以在web中繪制各種圖形,而Canvas為基于像素的繪圖。Canvas是一個(gè)相當(dāng)于畫板的html節(jié)點(diǎn),我們必須以js操作繪圖2012-12-26
在html5的Canvas上繪制橢圓的幾種方法總結(jié)
HTML5中的Canvas并沒有直接提供繪制橢圓的方法,下面是對(duì)幾種繪制方法的總結(jié)。各種方法各有優(yōu)缺,視情況選用。各方法的參數(shù)相同,感興趣的朋友可以參考下2013-01-07HTML5 Canvas繪制超級(jí)漂亮的發(fā)光Loading動(dòng)畫
HTML5 Canvas相當(dāng)于一個(gè)畫板,你可以在Canvas繪制任意的東西,今天要分享一款利用HTML5 Canvas繪制的loading動(dòng)畫效果,非常的漂亮2015-12-09- 在簡單的矩形不能滿足需求的情況下,可以同本例提供的方法來繪制復(fù)雜的形狀或路徑。下面為大家介紹下HTML5如何在canvas中繪制復(fù)雜形狀,需要的朋友可以參考下2014-06-23
- 這篇文章主要介紹了HTML5 canvas繪制的玫瑰花效果,適合程序猿在情節(jié)送給小女友哦,需要的朋友參考下吧2014-05-29
- 這篇文章主要介紹了html5使用canvas繪制太陽系效果,需要的朋友可以參考下2014-12-15