html5学习 - canvas画图和清除图片

在canvas上画一张图其实很简单，就是用drawImgage函数。

定义

这里先贴上w3c里的定义和用法：

1. JavaScript 语法 1 (在画布上定位图像：)

context.drawImage(img,x,y);

1. JavaScript 语法 2 (在画布上定位图像，并规定图像的宽度和高度：)

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

1. 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);

就这些~ 其实我是想实现图片拖动，放大缩小然后剪切的。虽然我已经实现了~ 放到下一篇博客里。