在canvas上畫一張圖其實很簡單，就是用drawImgage函數。

定義

這里先貼上w3c里的定義和用法：

JavaScript 語法 1 (在畫布上定位圖像：)

context.drawImage(img,x,y);

JavaScript 語法 2 (在畫布上定位圖像，并規定圖像的寬度和高度：)

context.drawImage(img,x,y,width,height);

JavaScript 語法 3 (剪切圖像，并在畫布上定位被剪切的部分：)

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

---

參數描述

img	規定要使用的圖像、畫布或視頻。
sx	可選。開始剪切的 x 坐標位置。
sy	可選。開始剪切的 y 坐標位置。
swidth	可選。被剪切圖像的寬度。
sheight	可選。被剪切圖像的高度。
x	在畫布上放置圖像的 x 坐標位置。
y	在畫布上放置圖像的 y 坐標位置。
width	可選。要使用的圖像的寬度。（伸展或縮小圖像）
height	可選。要使用的圖像的高度。（伸展或縮小圖像）

以上內容參考自: w3c
也可以去這個w3c上去測試使用方法。

例子代碼

先貼html的代碼內容：

<img src="../img/test.jpg" alt="test pic" id="test_img"><canvas id="canvasOne"></canvas>

請給canvas設置一下高和寬，然后js代碼如下：

$(document).ready(function() { //這里是jquery的ready方法，使用的話請導入jquery，不想用請用document.load()var theCanvas = document.getElementById("canvasOne");if (!theCanvas || !theCanvas.getContext) {alert("false");}// alert($(document).width());// alert($.browser.version)ctx = theCanvas.getContext("2d");var test_img = document.getElementById("test_img");ctx.drawImage(test_img, 20, 20, 300, 300);});

清除drawImage內容

現在我找到的就兩個辦法，一個是fillRect()把內容直接覆蓋掉，一個是clearRect()清除掉內容。

fillRect

這個的使用方法很簡單：

context.fillRect(x,y,width,height);

例子：

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillRect(20,20,150,100);

clearRect

這個的使用方法和fillRect極其相似：

context.clearRect(x,y,width,height);

例子：

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(0,0,300,150); ctx.clearRect(20,20,100,50);

就這些~ 其實我是想實現圖片拖動，放大縮小然后剪切的。雖然我已經實現了~ 放到下一篇博客里。

總結

以上是生活随笔為你收集整理的html5学习 - canvas画图和清除图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。