HTML5 canvas 9繪制圖片實(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() { //檢測所有圖像信息載入頁面里
context.drawImage(img, 0, 0); // img對象;0,0:img坐標(biāo)起點(diǎn)
};
</script>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了理解JavaScript中的window對象,本文通過實(shí)例代碼詳細(xì)介紹Window對象的一些重要用途，需要的朋友可以參考下2022-07-07
今天小編就為大家分享一篇layui寫后臺表格思路和賦值用法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
微信小程序全局?jǐn)?shù)據(jù)共享和分包圖文詳解
全局?jǐn)?shù)據(jù)共享是為了解決組件之間數(shù)據(jù)共享的問題,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局?jǐn)?shù)據(jù)共享和分包的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
微信小程序以7天為周期連續(xù)簽到7天功能效果的示例代碼
這篇文章主要介紹了微信小程序以7天為周期連續(xù)簽到7天功能效果的示例代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
window.onload想必大家都有使用過吧，在窗口加載時執(zhí)行，如果多次使用window.onload該如何判斷呢？下面與大家分享個方法2014-09-09
使用JS手寫一個類似?Laravel?驗(yàn)證器的表單驗(yàn)證器
這篇文章主要為大家介紹了使用JS手寫一個類似?Laravel?驗(yàn)證器的表單驗(yàn)證器實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
在之前的編程語言排行榜中，我們曾介紹過轉(zhuǎn)正在即的JavaScript語言，正如文章中闡明的那樣，JavaScript不僅是最具活力的腳本語言，還是是最有用的編程語言之一。2010-08-08
深入剖析JavaScript中Geolocation?API的使用
這篇文章主要來和大家一起深入探討?JavaScript?的?Geolocation?API,看看它的強(qiáng)大之處以及如何在你的項(xiàng)目中應(yīng)用它,感興趣的可以了解下2024-03-03
JavaScript判斷數(shù)字是否為質(zhì)數(shù)的方法匯總
這篇文章主要介紹了JavaScript判斷數(shù)字是否為質(zhì)數(shù)的方法匯總的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
Bootstrap柵格系統(tǒng)簡單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Boostrap柵格系統(tǒng)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03