js HTML5 canvas繪制圖片的方法
本文實例為大家分享了HTML5 canvas繪制圖片的具體代碼,供大家參考,具體內(nèi)容如下
demo.js
window.onload=function() { createcanvas(); drawImage(); } function createcanvas() { var CANVAS=document.getElementById('mycanvas'); context=CANVAS.getContext('2d'); } function drawImage() { var img=new Image(); img.onload=function() { context.drawImage(img,0,0,200,200 ); } img.src="img5.jpg"; }
demo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="demo.js"></script> </head> <body> <canvas id="mycanvas" width="400" hight="400" > <span>你的瀏覽器不支持canvas</span> </canvas> </body> </html>
圖片:
效果:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js HTML5多圖片上傳及預(yù)覽實例解析(不含前端的文件分割)
- HTML5 JS壓縮圖片并獲取圖片BASE64編碼上傳
- 基于HTML5+JS實現(xiàn)本地圖片裁剪并上傳功能
- JS HTML5拖拽上傳圖片預(yù)覽
- JS+HTML5實現(xiàn)上傳圖片預(yù)覽效果完整實例【測試可用】
- JS+html5實現(xiàn)異步上傳圖片顯示上傳文件進度條功能示例
- 手機端 HTML5使用photoswipe.js仿微信朋友圈圖片放大效果
- js+html5繪制圖片到canvas的方法
- JavaScript+html5 canvas實現(xiàn)圖片破碎重組動畫特效
- JS+HTML5實現(xiàn)圖片在線預(yù)覽功能
- javascript實現(xiàn)移動端 HTML5 圖片上傳預(yù)覽和壓縮功能示例
相關(guān)文章
JavaScript實現(xiàn)定時頁面跳轉(zhuǎn)功能示例
這篇文章主要介紹了JavaScript實現(xiàn)定時頁面跳轉(zhuǎn)功能,涉及javascript結(jié)合時間函數(shù)定時觸發(fā)自定義函數(shù)功能操作技巧,需要的朋友可以參考下2017-02-02javascript 讀取內(nèi)聯(lián)之外的樣式(style、currentStyle、getComputedStyle區(qū)別介紹
最常用的是style屬性,在JavaScript中,通過document.getElementById(id).style.XXX就可以獲取到XXX的值,但意外的是,這樣做只能取到通過內(nèi)嵌方式設(shè)置的樣式值,即style屬性里面設(shè)置的值。2010-05-05詳解JavaScript的閉包、IIFE、apply、函數(shù)與對象
本文主要對JavaScript的閉包、IIFE、apply、函數(shù)與對象進行詳細介紹。有很好的參考價值,需要的朋友一起來看下吧2016-12-12js change,propertychange,input事件小議
github上關(guān)于mootools一個issue的討論很有意思,所以就想測試記錄下。感興趣的可以點擊原頁面看看2011-12-12微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問題
小程序文件上傳還是有點麻煩的,其實主要還是小程序?qū)Φ慕涌谟兄T多的不便,比如說,文件不能批量提交,只能一個個的提交,小程序的上傳需要專門的接口,這篇文章主要介紹了微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問題,需要的朋友可以參考下2023-11-11JavaScript中push(),join() 函數(shù) 實例詳解
本文通過實例給大家介紹了JavaScript中push(),join() 的知識,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09