Javascript实现Canvas绘图 —— 2D绘图之填充、描边及绘制矩形

Canvas绘图的实现：

        <canvas>元素负责在页面中设定一个区域，通过JS动态地在这个区域中绘制图形。

IE9+、Firefox1.5+、Safari2+、Opera9+、Chrome、IOS版Safari以及Android版WebKit都在一定程度上支持<canvas>元素。

1、基本用法

（1）HTML部分的代码

/* width和height属性，指定绘图的区域的大小 */
<canvas id="picture" width="200" height="200">
/* 标签之间的内容在浏览器不支持<canvas>元素时显示 */
    A picture about apple.
</canvas>

<canvas>元素对应的DOM元素也有width和height属性，可随意修改。

可以通过CSS添加样式，如果不添加任何样式或不绘制任何图形，在页面上是看不到该元素的。

（2）JS部分的代码

var picture = document.getElementById("picture");
// 确定浏览器支持<canvas>元素
if(picture.getContext){
    // 取得绘图上下文对象
    var context = picture.getContext("2d");
    // ......
}

（3）导出在<canvas>元素上绘制的图像

var picture = document.getElementById("picture");
// 确定浏览器支持<canvas>元素
if(picture.getContext){
    // 取得图像的数据URL
    var imgURL = picture.toDataURL("image/png");
    // 显示图像
    // toDataURL方法接收图像的MIME类型格式作为参数，适合用来创建图像的任何上下文
    var image = document.createElement("img");
    image.src = imgURL;
    document.body.appendChild(image);
}

默认情况下，浏览器会将图像编码为PNG格式（除非另行指定）。

Firefox和Opera也支持基于 "image/jpeg"参数的JPEG编码格式。

注：如果绘制到画布上的图像源自不同的域，toDataURL()方法会抛出错误。

2、填充和描边

使用2D绘图上下文提供的方法，可以绘制简单的2D图形，如矩形、弧形和路径。2D上下文的坐标开始于<canvas>元素的左上角，原点坐标是(0,0)。所有坐标值基于这个原点计算，x值越靠右越大，y值越靠下越大。

填充：用指定的样式（颜色、渐变或图像）填充图形。

描边：只在图形的边缘画线。

填充和描边操作的结果取决于两个属性：fillStyle 和 strokeStyle 。属性的值可以是字符串、渐变对象和模式对象，默认值都是 "#000000"。指定表示颜色的字符串值时，可以使用CSS中指定颜色值的任何格式：颜色名、十六进制码、rgb、rgba、hsl和hsla。

var picture = document.getElementById("picture");
// 确定浏览器支持<canvas>元素
if(picture.getContext){
    // 取得绘图上下文对象
    var context = picture.getContext("2d");
    context.strokeStyle = "red";    // 边为红色
    context.fillStyle = "#0000ff";  // 填充颜色为蓝色
}

 

3、绘制矩形

矩形是唯一一种可以直接在2D上下文中绘制的形状。

绘制矩形相关的方法：

　　fillRect()：在画布上绘制的矩形会用指定的颜色填充，颜色由fillStyle属性指定；

　　strokeRect()：在画布上绘制的矩形会用指定的颜色描边，颜色由strokeStyle属性指定；

　　clearRect()：清除画布上的矩形区域，把绘制上下文中的某一矩形区域变透明。

以上3个方法都接收4个参数（单位是像素）：

　　矩形的x坐标；
　　矩形的y坐标；
　　矩形的宽度；
　　矩形的高度。

 

var picture = document.getElementById("picture");
// 确定浏览器支持<canvas>元素
if(picture.getContext){
    // 取得绘图上下文对象
    var context = picture.getContext("2d");

    // 绘制红色矩形，粉色描边，从坐标(10, 10)处开始绘制，宽和高为50像素
    context.fillStyle = "#ff0000";
    context.strokeStyle = "pink";
    context.fillRect(10, 10, 50, 50);

    // 绘制半透明的蓝色矩形，黄色描边，在第一个矩形上面绘制第二个矩形
    context.fillStyle = "rgba(0,0,255,0.5)";
    context.strokeStyle = "#00ff00";
    context.fillRect(30, 30, 50, 50);

    // 在两个矩形重叠的地方清除一个小矩形，变成透明
    context.clearRect(40, 40, 10, 10);
}

 

设置描边相关的属性：

　　lineWidth属性：控制描边线条的宽度，可以是任意整数。
　　lineCap属性：控制线条末端的形状是平头、圆头还是方头（ "butt"、"round"或"square"）。
　　lineJoin属性：控制线条相交的方式是圆交、斜交还是斜接（ "round"、"bevel"或"miter"）。