HTML5 canvas 9繪制圖片實(shí)例詳解
更新時(shí)間：2016年09月06日 15:21:52 投稿：lqh
HTML5 canvas 9繪制圖片
繪制圖片
Var image=new Image();
image.src=” http://img4.duitang.com/uploads/item/201406/25/20140625182321_4MTau.thumb.700_0.jpeg”;
image.onload=function(){}
Context.drawImage(image,x,y);
Context.drawImage(image,x,y,w,h);
Context.drawIamge(image,sx,sy,sw,sh,dx,dy,dw,dh);
圖片平鋪
Var pat= context.createPattern(image,”repeat”);
Context.fillStyle=pat;
Context.fillRect(0,0,400,300);
圖片裁剪
先繪制好路徑
Context.clip();
<html>
<head>
<meta charset="UTF-8">
<title>繪制圖片</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var oCanvas = document.getElementById("canvas");
var context = oCanvas.getContext("2d");
context.fillStyle = "#ededed";
context.fillRect(0, 0, 500, 500);
//繪制圖片
var img = new Image(); //創(chuàng)建
img.src = "img/01.jpg"; //圖片地址
img.onload = function() { //檢測(cè)所有圖像信息載入頁(yè)面里
context.drawImage(img, 0, 0); // img對(duì)象;0,0:img坐標(biāo)起點(diǎn)
};
</script>
</body>
</html>
相關(guān)文章
這篇文章主要為大家介紹了如何利用JavaScript實(shí)現(xiàn)開心消消樂小游戲,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
js實(shí)現(xiàn)拖拽效果（構(gòu)造函數(shù)）
這篇文章主要介紹了js利用構(gòu)造函數(shù)實(shí)現(xiàn)拖拽效果2015-12-12
這篇文章主要介紹了微信小程序開發(fā)之轉(zhuǎn)發(fā)分享功能的實(shí)現(xiàn)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
微信小程序使用input組件實(shí)現(xiàn)密碼框功能【附源碼下載】
這篇文章主要介紹了微信小程序使用input組件實(shí)現(xiàn)密碼框功能,涉及input組件布局設(shè)置相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
javascript構(gòu)造函數(shù)以及原型對(duì)象的理解
本文主要介紹了javascript構(gòu)造函數(shù)以及原型對(duì)象的理解。分享了有關(guān)它們的實(shí)例代碼，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
標(biāo)識(shí)符指的是javascript中定義的符號(hào)，標(biāo)識(shí)符可以由任意順序的大小寫字母、數(shù)字、下劃線和美元符號(hào)組成，但標(biāo)識(shí)符不能以數(shù)字開頭，也不能是javascript中的保留關(guān)鍵字。并且要注意，javascript是嚴(yán)格區(qū)分大小寫的。2015-06-06
這篇文章主要介紹了js實(shí)現(xiàn)精美的銀灰色豎排折疊菜單,可實(shí)現(xiàn)頁(yè)面左側(cè)豎排的縱向折疊菜單效果,非常美觀實(shí)用,需要的朋友可以參考下2015-05-05
BootstrapTable refresh 方法使用實(shí)例簡(jiǎn)單介紹
本文就bootstrapTable refresh 方法如何傳遞參數(shù)做簡(jiǎn)單舉例說明，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-02-02
說起javascript無(wú)人不知無(wú)人不曉吧，下面是一些關(guān)于客戶端JS性能的一些優(yōu)化的小技巧，希望對(duì)大家有所幫助2013-11-11
這篇文章主要介紹了JS實(shí)現(xiàn)的雪花飄落特效,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-12-12