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

Canvas绘图的实现：

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

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



1、基本用法

（1）HTML部分的代码

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

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

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



（2）JS部分的代码

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

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

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

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

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

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



2、填充和描边

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

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

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

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

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

3、绘制矩形

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

绘制矩形相关的方法：

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

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

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

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

　　矩形的x坐标；

　　矩形的y坐标；

　　矩形的宽度；

　　矩形的高度。

 1 var picture = document.getElementById("picture");
 2 // 确定浏览器支持<canvas>元素
 3 if(picture.getContext){
 4     // 取得绘图上下文对象
 5     var context = picture.getContext("2d");
 6
 7     // 绘制红色矩形，粉色描边，从坐标(10, 10)处开始绘制，宽和高为50像素
 8     context.fillStyle = "#ff0000";
 9     context.strokeStyle = "pink";
10     context.fillRect(10, 10, 50, 50);
11
12     // 绘制半透明的蓝色矩形，黄色描边，在第一个矩形上面绘制第二个矩形
13     context.fillStyle = "rgba(0,0,255,0.5)";
14     context.strokeStyle = "#00ff00";
15     context.fillRect(30, 30, 50, 50);
16
17     // 在两个矩形重叠的地方清除一个小矩形，变成透明
18     context.clearRect(40, 40, 10, 10);
19 }

设置描边相关的属性：

　　lineWidth属性：控制描边线条的宽度，可以是任意整数。

　　lineCap属性：控制线条末端的形状是平头、圆头还是方头（ "butt"、"round"或"square"）。

　　lineJoin属性：控制线条相交的方式是圆交、斜交还是斜接（ "round"、"bevel"或"miter"）。