js HTML5 canvas繪制圖片的方法
本文實(shí)例為大家分享了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>
圖片:
效果:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js HTML5多圖片上傳及預(yù)覽實(shí)例解析(不含前端的文件分割)
- HTML5 JS壓縮圖片并獲取圖片BASE64編碼上傳
- 基于HTML5+JS實(shí)現(xiàn)本地圖片裁剪并上傳功能
- JS HTML5拖拽上傳圖片預(yù)覽
- JS+HTML5實(shí)現(xiàn)上傳圖片預(yù)覽效果完整實(shí)例【測(cè)試可用】
- JS+html5實(shí)現(xiàn)異步上傳圖片顯示上傳文件進(jìn)度條功能示例
- 手機(jī)端 HTML5使用photoswipe.js仿微信朋友圈圖片放大效果
- js+html5繪制圖片到canvas的方法
- JavaScript+html5 canvas實(shí)現(xiàn)圖片破碎重組動(dòng)畫(huà)特效
- JS+HTML5實(shí)現(xiàn)圖片在線預(yù)覽功能
- javascript實(shí)現(xiàn)移動(dòng)端 HTML5 圖片上傳預(yù)覽和壓縮功能示例
相關(guān)文章
JavaScript實(shí)現(xiàn)定時(shí)頁(yè)面跳轉(zhuǎn)功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)定時(shí)頁(yè)面跳轉(zhuǎn)功能,涉及javascript結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)自定義函數(shù)功能操作技巧,需要的朋友可以參考下2017-02-02js動(dòng)態(tài)移動(dòng)滾動(dòng)條至底部示例代碼
這篇文章主要介紹了使用js動(dòng)態(tài)移動(dòng)滾動(dòng)條至底部,需要的朋友可以參考下2014-04-04JS正則表達(dá)式詳解及身份證號(hào)碼驗(yàn)證(簡(jiǎn)易版)
在做用戶實(shí)名驗(yàn)證時(shí),常會(huì)用到身份證號(hào)碼的正則表達(dá)式及校驗(yàn)方案,下面這篇文章主要給大家介紹了關(guān)于JS正則表達(dá)式及身份證號(hào)碼驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2022-07-07javascript 讀取內(nèi)聯(lián)之外的樣式(style、currentStyle、getComputedStyle區(qū)別介紹
最常用的是style屬性,在JavaScript中,通過(guò)document.getElementById(id).style.XXX就可以獲取到XXX的值,但意外的是,這樣做只能取到通過(guò)內(nèi)嵌方式設(shè)置的樣式值,即style屬性里面設(shè)置的值。2010-05-05詳解JavaScript的閉包、IIFE、apply、函數(shù)與對(duì)象
本文主要對(duì)JavaScript的閉包、IIFE、apply、函數(shù)與對(duì)象進(jìn)行詳細(xì)介紹。有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧2016-12-12js change,propertychange,input事件小議
github上關(guān)于mootools一個(gè)issue的討論很有意思,所以就想測(cè)試記錄下。感興趣的可以點(diǎn)擊原頁(yè)面看看2011-12-12微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問(wèn)題
小程序文件上傳還是有點(diǎn)麻煩的,其實(shí)主要還是小程序?qū)Φ慕涌谟兄T多的不便,比如說(shuō),文件不能批量提交,只能一個(gè)個(gè)的提交,小程序的上傳需要專(zhuān)門(mén)的接口,這篇文章主要介紹了微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問(wèn)題,需要的朋友可以參考下2023-11-11JavaScript中push(),join() 函數(shù) 實(shí)例詳解
本文通過(guò)實(shí)例給大家介紹了JavaScript中push(),join() 的知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09