Canvas 图像绘制的基本方法（下）

2015/07/21 23:30:03 | 作者：HTML5学堂（码匠） | 分类：HTML5新技术 | 关键词：Canvas,绘制图像,路径,贝塞尔曲线

Canvas 基本绘制（下）

HTML5学堂：在前一篇文章《Canvas 基本绘制（上）》当中，我们为大家介绍了Canvas的基本知识——什么是Canvas、如何使用Canvas进行图像的绘制、Canvas的一些基本方法。在今天的这篇文章当中，我们将为大家介绍Canvas的基本属性、快速路径的绘制方法等。

Canvas基本属性

设置填充与描边颜色

strokeStyle、fillStyle

线条样式的设置

lineCap：设置线条末端线帽的样式（round、square）

注释："round" 和 "square" 会使线条略微变长，两端变长的长度各为宽度的一半。

lineWidth：不需要写单位，以像素计

字体设置

font：同 CSS font-family 属性

textAlign：文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start。

textBaseline：文字竖直对齐方式。可取属性值： top, hanging（文本基线是悬挂基线）, middle,alphabetic（文本基线是普通的字母基线）, ideographic（文本基线是表意基线）, bottom 。默认值：alphabetic。

Canvas基本属性操作实例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂</title>
<link rel="stylesheet" href="../css/reset.css">
<script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
<style>
.wrap {
width: 600px;
height: 300px;
margin: 0 auto;
}
.wrap canvas {
border: 1px solid #999;
}
</style>
</head>
<body>
<div class="wrap">
<canvas width="600" height="300">
您的浏览器不支持canvas！
</canvas>
</div>
<script>
var testCanvas = $("canvas")[0];
var context = testCanvas.getContext("2d");
context.beginPath();
// 线条宽度
context.lineWidth = "3";
// 填充样式
context.strokeStyle = "red";
context.moveTo(50, 50);
context.lineTo(50, 250);
context.lineTo(150, 250);
context.lineTo(150, 50);
context.lineTo(50, 50);
context.closePath();
// 闭合在实现绘制该图像左上角出现不重合线性
context.stroke();
// 中间那条线
context.beginPath();
context.strokeStyle = "green";
context.moveTo(50, 150);
context.lineTo(150, 150);
context.stroke();
context.closePath();
// 右边的矩形
context.beginPath();
context.strokeStyle = "blue";
context.fillStyle = "skyblue";
context.moveTo(300, 50);
context.lineTo(300, 250);
context.lineTo(550, 250);
context.lineTo(550, 50);
context.lineTo(300, 50);
context.fill();
context.closePath();
var txt = "HTML5学堂";
context.textAlign = "start";
context. textBaseline = "middle";
context.font = "30px Microsoft YaHei";
context.fillText(txt, 224, 100);
context.strokeText(txt, 224, 200);
context.beginPath();
// 线条宽度
context.lineWidth = "10";
// 设置线条末端线帽的样式
context.lineCap = "round";
// 作参考线
context.moveTo(224, 50);
context.lineTo(224, 250);
context.moveTo(160, 100);
context.lineTo(290, 100);
context.stroke();
</script>
</body>
</html>

Canvas基本属性

Canvas快速绘制

矩形路径的绘制

rect(x,y,w,h)：x、y为起始坐标，w、h为矩形的宽、高

fillRect(x,y,w,h)：参数同上，与上面区别：上面只绘制、不填充，fillRect(x,y,w,h)填充

圆形路径的绘制

快速绘制-圆

arc(x,y,r,sa,ea,true/false)：x、y为圆心坐标，r为半径，sa、ea分别为起始角度和结束角度（以弧度计），最后一个参数为true时，逆时针画圆，false则顺时针画圆；

贝塞尔曲线

quadraticCurveTo (kx,ky,ex,ey)

二次贝塞尔曲线开始点：moveTo(x, y);

kx、ky：控制点

ex、ey：结束点

bezierCurveTo (kx1,ky1,kx2,ky2,ex,ey) ：三次贝塞尔曲线，两个控制点，一个终点

开始点：moveTo(x, y);

kx1、ky1：控制点

kx2、ky2：控制点

ex、ey：结束点

Canvas快速绘制实例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂</title>
<link rel="stylesheet" href="../css/reset.css">
<script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
<style>
.draw {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="testCanvas" width="1000" height="500" class="draw"></canvas>
<script>
var testCanvas = document.getElementById("testCanvas");
// 获取getContext()对象
var context = testCanvas.getContext("2d");
// 开始路径
context.beginPath();
// 设置填充样式
context.fillStyle = "yellow";
// 设置描边样式
context.strokeStyle = "green";
// 线条宽度
context.lineWidth = "5";
// 矩形路径的绘制,但是不填充
context.rect(10, 10, 200, 200)
// 绘制路径
context.stroke();
// 填充路径
// context.fill();
// 关闭路径
context.closePath();
context.beginPath();
context.fillStyle = "blue";
// 矩形路径的填充
context.fillRect(220, 10, 200, 200);
context.closePath();
context.beginPath();
context.fillStyle = "blue";
// 圆形路径的绘制
context.arc(500, 250, 200, 0, Math.PI / 2, false);
context.stroke();
context.fill();
context.closePath();
context.beginPath();
context.strokeStyle = "#fcf";
// 矩形路径的填充
context.moveTo(500, 250);
context.quadraticCurveTo(20, 100, 100, 20)
context.stroke();
context.closePath();
context.beginPath();
context.strokeStyle = "#000";
// 矩形路径的填充
context.moveTo(500, 250);
context.bezierCurveTo(500, 100, 40, 80, 500, 200)
context.stroke();
context.closePath();
</script>
</body>
</html>