js+html5繪制圖片到canvas的方法
更新時(shí)間：2015年06月05日 11:58:37 作者：pythoner
這篇文章主要介紹了js+html5繪制圖片到canvas的方法,涉及html5元素操作的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了js+html5繪制圖片到canvas的方法。分享給大家供大家參考。具體實(shí)現(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動(dòng)畫(huà)特效與技巧匯總》《JavaScript運(yùn)動(dòng)效果與技巧匯總》及《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》
希望本文所述對(duì)大家的web程序設(shè)計(jì)有所幫助。
相關(guān)文章
js獲取dom的高度和寬度(可見(jiàn)區(qū)域及部分等等)
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)捇蚋?、網(wǎng)頁(yè)正文全文寬或高以及網(wǎng)頁(yè)正文部分左或右，詳細(xì)請(qǐng)看下文，希望對(duì)大家有所幫助2013-06-06
JavaScript利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳
斷點(diǎn)續(xù)傳即在文件上傳期間因?yàn)橐恍┰蚨鴮?dǎo)致上傳終止時(shí)，下次再次上傳同一個(gè)文件就從上一次上傳到一半的地方繼續(xù)上傳，以節(jié)省上傳時(shí)間。本文將利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳功能，快來(lái)跟隨小編一起學(xué)一學(xué)吧2022-03-03
JavaScript實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
clipboard.js在移動(dòng)端復(fù)制失敗的解決方法
最近在使用clipboard.js碰到的一個(gè)小問(wèn)題，通過(guò)查找相關(guān)資料解決了，所以下面這篇文章主要給大家介紹了關(guān)于clipboard.js在移動(dòng)端復(fù)制失敗的解決方法，需要的朋友可以參考借鑒，下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06
函數(shù)式 JavaScript（一）簡(jiǎn)介
JavaScript 是一種強(qiáng)大但被誤解的語(yǔ)言。關(guān)于它到底是一種面向?qū)ο蟮恼Z(yǔ)言還是函數(shù)式語(yǔ)言，人們眾說(shuō)紛紜——但是現(xiàn)在讓我們把這些爭(zhēng)辯都拋到腦后。2014-07-07
本文是javascript插件化開(kāi)發(fā)系列教程的第六篇文章，還是重點(diǎn)對(duì)上一篇文章不足的地方進(jìn)行改進(jìn)重構(gòu)，逐步分析讓大家能有一個(gè)新的認(rèn)識(shí)，希望小伙伴們能夠喜歡。2015-02-02
javascript獲取和判斷瀏覽器窗口、屏幕、網(wǎng)頁(yè)的高度、寬度等
這篇文章主要介紹了javascript獲取和判斷瀏覽器窗口、屏幕、網(wǎng)頁(yè)的高度、寬度等,需要的朋友可以參考下2014-05-05
詳解JS實(shí)現(xiàn)簡(jiǎn)單的時(shí)分秒倒計(jì)時(shí)代碼
這篇文章主要介紹了JS時(shí)分秒倒計(jì)時(shí)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JS實(shí)現(xiàn)漂亮的窗口拖拽效果(可改變大小、最大化、最小化、關(guān)閉)
這篇文章主要介紹了JS實(shí)現(xiàn)漂亮的窗口拖拽效果,具有可改變大小、最大化、最小化、關(guān)閉等功能,以完整實(shí)例形式較為詳細(xì)的分析了JavaScript操作窗口的大小改變、還原及關(guān)閉等功能的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-10-10
Microsoft Ajax Minifier 壓縮javascript的方法
使用Microsoft AJAX 庫(kù) (第六個(gè)預(yù)覽版) 其中有一個(gè) ajaxmin.exe 可以壓縮Js文件可以在dos 命令下 /? 查看其參數(shù)說(shuō)明。2010-03-03