HTML5 canvas 9繪制圖片實例詳解
更新時間：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() { //檢測所有圖像信息載入頁面里
context.drawImage(img, 0, 0); // img對象;0,0:img坐標起點
};
</script>
</body>
</html>
相關(guān)文章
這篇文章主要為大家介紹了如何利用JavaScript實現(xiàn)開心消消樂小游戲,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
js實現(xiàn)拖拽效果（構(gòu)造函數(shù)）
這篇文章主要介紹了js利用構(gòu)造函數(shù)實現(xiàn)拖拽效果2015-12-12
這篇文章主要介紹了微信小程序開發(fā)之轉(zhuǎn)發(fā)分享功能的實現(xiàn)，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
微信小程序使用input組件實現(xiàn)密碼框功能【附源碼下載】
這篇文章主要介紹了微信小程序使用input組件實現(xiàn)密碼框功能,涉及input組件布局設(shè)置相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
javascript構(gòu)造函數(shù)以及原型對象的理解
本文主要介紹了javascript構(gòu)造函數(shù)以及原型對象的理解。分享了有關(guān)它們的實例代碼，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
標識符指的是javascript中定義的符號，標識符可以由任意順序的大小寫字母、數(shù)字、下劃線和美元符號組成，但標識符不能以數(shù)字開頭，也不能是javascript中的保留關(guān)鍵字。并且要注意，javascript是嚴格區(qū)分大小寫的。2015-06-06
這篇文章主要介紹了js實現(xiàn)精美的銀灰色豎排折疊菜單,可實現(xiàn)頁面左側(cè)豎排的縱向折疊菜單效果,非常美觀實用,需要的朋友可以參考下2015-05-05
BootstrapTable refresh 方法使用實例簡單介紹
本文就bootstrapTable refresh 方法如何傳遞參數(shù)做簡單舉例說明，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-02-02
說起javascript無人不知無人不曉吧，下面是一些關(guān)于客戶端JS性能的一些優(yōu)化的小技巧，希望對大家有所幫助2013-11-11
這篇文章主要介紹了JS實現(xiàn)的雪花飄落特效,結(jié)合實例形式詳細分析了JavaScript結(jié)合時間函數(shù)動態(tài)操作頁面元素的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-12-12