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快速绘制
矩形路径的绘制
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>Canvas绘制思路
开启路径——>设置属性——>进行路径的变化——>关闭路径——>描边或填充
Canvas效果补充：棋盘绘制
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂</title>
<link rel="stylesheet" href="../css/reset.css">
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="wrap">
<canvas width="1200" height="600">
您的浏览器不支持canvas！
</canvas>
</div>
<script>
var testCanvas = $("canvas")[0];
var context = testCanvas.getContext("2d");
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = "pink";
for (var i = 0; i < 26; i++) {
context.moveTo(0, i * 20);
context.lineTo(500, i * 20);
};
context.stroke();
context.beginPath();
context.strokeStyle = "skyblue";
for (var j = 0; j < 26; j++) {
context.moveTo(j * 20, 0);
context.lineTo(j * 20, 500);
};
context.font = "60px Microsoft YaHei";
context.strokeText("HTML5学堂-棋盘", 550, 250);
context.strokeText("梦幻雪冰、独行冰海", 550, 360);
context.stroke();
context.closePath();
</script>
</body>
</html>效果图如下：
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2015-08-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读