js+html5繪制圖片到canvas的方法
更新時間：2015年06月05日 11:58:37 作者：pythoner
這篇文章主要介紹了js+html5繪制圖片到canvas的方法,涉及html5元素操作的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了js+html5繪制圖片到canvas的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src="img_flwr.png";
</script>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript動畫特效與技巧匯總》《JavaScript運動效果與技巧匯總》及《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》
希望本文所述對大家的web程序設(shè)計有所幫助。
相關(guān)文章
網(wǎng)頁可見區(qū)域?qū)捇蚋?、網(wǎng)頁正文全文寬或高以及網(wǎng)頁正文部分左或右，詳細請看下文，希望對大家有所幫助2013-06-06
JavaScript利用切片實現(xiàn)大文件斷點續(xù)傳
斷點續(xù)傳即在文件上傳期間因為一些原因而導(dǎo)致上傳終止時，下次再次上傳同一個文件就從上一次上傳到一半的地方繼續(xù)上傳，以節(jié)省上傳時間。本文將利用切片實現(xiàn)大文件斷點續(xù)傳功能，快來跟隨小編一起學一學吧2022-03-03
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單的倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
最近在使用clipboard.js碰到的一個小問題，通過查找相關(guān)資料解決了，所以下面這篇文章主要給大家介紹了關(guān)于clipboard.js在移動端復(fù)制失敗的解決方法，需要的朋友可以參考借鑒，下面來一起學習學習吧2018-06-06
JavaScript 是一種強大但被誤解的語言。關(guān)于它到底是一種面向?qū)ο蟮恼Z言還是函數(shù)式語言，人們眾說紛紜——但是現(xiàn)在讓我們把這些爭辯都拋到腦后。2014-07-07
本文是javascript插件化開發(fā)系列教程的第六篇文章，還是重點對上一篇文章不足的地方進行改進重構(gòu)，逐步分析讓大家能有一個新的認識，希望小伙伴們能夠喜歡。2015-02-02
javascript獲取和判斷瀏覽器窗口、屏幕、網(wǎng)頁的高度、寬度等
這篇文章主要介紹了javascript獲取和判斷瀏覽器窗口、屏幕、網(wǎng)頁的高度、寬度等,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了JS時分秒倒計時的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
JS實現(xiàn)漂亮的窗口拖拽效果(可改變大小、最大化、最小化、關(guān)閉)
這篇文章主要介紹了JS實現(xiàn)漂亮的窗口拖拽效果,具有可改變大小、最大化、最小化、關(guān)閉等功能,以完整實例形式較為詳細的分析了JavaScript操作窗口的大小改變、還原及關(guān)閉等功能的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2015-10-10
Microsoft Ajax Minifier 壓縮javascript的方法
使用Microsoft AJAX 庫 (第六個預(yù)覽版) 其中有一個 ajaxmin.exe 可以壓縮Js文件可以在dos 命令下 /? 查看其參數(shù)說明。2010-03-03