js HTML5 canvas繪制圖片的方法

更新時間：2017年09月08日 08:39:34 作者：1點

這篇文章主要為大家詳細(xì)介紹了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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript創(chuàng)建數(shù)組的最簡代碼
2008-02-02
Bootstrap模態(tài)框禁用空白處點擊關(guān)閉
這篇文章主要為大家詳細(xì)介紹了Bootstrap模態(tài)框禁用空白處點擊關(guān)閉的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
JavaScript字符串的長度問題
這篇文章主要介紹了JavaScript字符串的長度問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
JavaScript開發(fā)者必備的10個Sublime Text插件
Sublime Text幾乎是任何開發(fā)者在其工具箱的必備應(yīng)用程序,這篇文章主要介紹了JavaScript開發(fā)者必備的10個Sublime Text插件，感興趣的小伙伴們可以參考一下
2016-02-02
JavaScript獲取地址欄參數(shù)的方法實現(xiàn)
這篇文章主要給大家介紹了關(guān)于JavaScript獲取地址欄參數(shù)的方法實現(xiàn),項目中經(jīng)常遇到獲取上個頁面跳轉(zhuǎn)過來獲取當(dāng)前的參數(shù),文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07
使用JavaScript實現(xiàn)等比縮放的幾種常見方法
這篇文章主要介紹了如何使用JavaScript對HTML中的元素和任意DOM元素進行等比縮放,通過獲取容器或元素的尺寸信息,計算縮放比例,并應(yīng)用CSS變換（transform屬性）來實現(xiàn)等比縮放,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-01-01
JavaScript打開客戶端exe文件的代碼
可以運行客戶端exe文件的代碼
2008-10-10
JavaScript 預(yù)解析的4種實現(xiàn)方法解析
這篇文章主要介紹了JavaScript 預(yù)解析的4種實現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-09-09
常用限制input的方法的js代碼
常用限制input的方法的js代碼...
2007-03-03
微信小程序彈窗組件使用詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序彈窗組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07