风骚的 Canvas
4.1 canvas中线条
canvas对于线条定义了一些基本的属性，比如线宽，线帽(线条尾部的定义线型的样式)，两条线交初的样式，以及虚线样式等等。
4.1.1 线宽
API:
- lineWidth:定义线宽。
举例
<body>
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
window.onload = function () {
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
//线宽
ctx.lineWidth = 5
ctx.moveTo(20,20)
ctx.lineTo(80,20)
ctx.strokeStyle = 'pink'
ctx.stroke()
ctx.beginPath()
ctx.lineWidth = 10
ctx.moveTo(20,40)
ctx.lineTo(80,40)
ctx.strokeStyle = 'green'
ctx.stroke()
ctx.beginPath()
ctx.lineWidth = 20
ctx.moveTo(20,60)
ctx.lineTo(80,60)
ctx.strokeStyle = 'blue'
ctx.stroke()
</script>
</body>
浏览器中预览效果
注意：一定要使用beginPath开始一条新的路径哦，如果不适用beginPath开辟一条新的路径的话，那么canvas默认就会认为当前只存在一条路径，那么后面的定义的样式就会覆盖前面的样式，导致绘制出来的图像与我们预期的不一致，并且在矩形和圆形中 实际宽度 = 线宽 + 宽。
4.1.2 线帽
API:
- lineCap： 可取值 butt 无线帽，round 圆形线帽，square 矩形线帽
无线帽
<body>
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
window.onload = function () {
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
ctx.lineCap = "Butt"
ctx.moveTo(20,60)
ctx.lineTo(80,60)
ctx.lineWidth = '10'
ctx.strokeStyle = 'blue'
ctx.stroke()
</script>
</body>
浏览器中预览效果
圆形线帽
<body>
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
window.onload = function () {
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
ctx.lineCap = "round"
ctx.moveTo(20,60)
ctx.lineTo(80,60)
ctx.lineWidth = '10'
ctx.strokeStyle = 'blue'
ctx.stroke()
</script>
</body>
浏览器中预览效果
矩形线帽
<body>
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
window.onload = function () {
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
ctx.lineCap = "Butt"
ctx.moveTo(20,60)
ctx.lineTo(80,60)
ctx.lineWidth = '10'
ctx.strokeStyle = 'blue'
ctx.stroke()
</script>
</body>
浏览器中预览效果
圆形线帽
<body>
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
window.onload = function () {
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
ctx.lineCap = "square"
ctx.moveTo(20,60)
ctx.lineTo(80,60)
ctx.lineWidth = '10'
ctx.strokeStyle = 'blue'
ctx.stroke()
</script>
</body>
浏览器中预览效果
各种线帽之间的差别
round和square值会使线条稍微变长一点，因为它们给线条增加了线帽部分,如下图所示：
（1）取值为butt：每条线的头端和尾端都是长方形，也就是不做任何的处理。
（2）取值为round：每条线的头和尾都增加一个半圆，半圆的直径为线宽长度。
（3）取值为square：每条线的头和尾都增加一个长方形，长方形的长度为线宽的一半，高度保持为线宽长度。
4.1.3 线条连接处的样式
API:
- lineJoin: 可取值 miter 尖角，round 圆角， bevel 斜角
尖角
<body>
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
window.onload = function () {
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
ctx.lineJoin = "miter"
ctx.lineWidth = 10
ctx.strokeStyle = 'red'
</script>
</body>
浏览器中预览效果
圆角
<body>
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
window.onload = function () {
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
ctx.lineJoin = "round"
ctx.lineWidth = 10
ctx.strokeStyle = 'red'
</script>
</body>
浏览器中预览效果
斜角
<body>
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
window.onload = function () {
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
ctx.lineJoin = "bevel"
ctx.lineWidth = 10
ctx.strokeStyle = 'red'
</script>
</body>
浏览器中预览效果
4.1.4 虚线
canvas中虚线通过setLineDash()方法来定义虚线，可以向setLineDash()内传入一个数组，canvas会按照这数组里定义好的数组去拼接图形的虚线样式，如[10,20]，那么canvas就会按照 10px 20px的形式进行虚线的绘制
API：
- setLineDash()：参数为数值类型的数组，如[10,20],[23,50,80]等等
举例
<body>
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
window.onload = function () {
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
ctx.beginPath
ctx.lineWidth = 1
ctx.setLineDash([10,5,20])
ctx.moveTo(20,100)
ctx.strokeStyle = 'green'
ctx.strokeRect(20,100,100,100)
</script>
</body>
4.2 文本
canvas中的文本操作，包括文本的绘制，文本样式的调整等等
4.2.1 绘制文本
文本方法API:
- fillText（text,x,y）: 绘制填充文本，参数分别对应文本，x,y分别对应的是左边第一个字的左下角的坐标
- storkeText (text,x,y): 描边文本，参数同上
- measureText()：该方法不能绘制文本，它只是用于获取文本的宽度。
文本属性API:
- font: 定义字体的类型，大小，粗细等等。
- textAlign: 定义文本水平对齐方式，取值 start，left，end，right，center
- textBaseline： 文本垂直方式 取值alphabetic 基线对齐，top顶部对齐，middle居中，bottom底部对齐
- fillStyle: 定义文本的填充样式
- strokeStyle： 定义文本的描边样式
填充文本
<body>
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
window.onload = function () {
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var text = '我是好人'
ctx.font = "bold 30px 微软雅黑" //定义字体样式
ctx.fillStyle = 'green' //字体填充样式
ctx.fillText(text,20,80)
</script>
</body>
浏览器中预览效果
描边文本
<body>
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
window.onload = function () {
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var text = '我是好人'
ctx.font = "bold 30px 微软雅黑" //定义字体样式
ctx.strokeStyle = "purple" //字体描边样式
ctx.strokeText(text,20,40)
</script>
</body>
获取文本长度
<body>
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
window.onload = function () {
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var text = '我是好人'
ctx.font = "bold 30px 微软雅黑" //定义字体样式
ctx.strokeStyle = "purple"
ctx.strokeText(text,20,40)
let textLength = ctx.measureText(text).width
alert(text + '文本长度为：' + textLength)
</script>
</body>
4.2.2 文本属性操作
canvas中文本属性的操作类似与css中文本样式，也就是定义一些基本的样式等，对于font,fillStyle,strokeStyle前面的案例中都有所涉及，可自行查看，下面例子着重介绍水平和垂直对齐方式。
水平对齐方式
<body>
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
window.onload = function () {
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
//首先绘制一条竖线
ctx.strokeStyle = 'purple'
ctx.lineWidth = 5
ctx.moveTo(250, 0)
ctx.lineTo(250, 500)
ctx.stroke()
var text = '我是好人'
ctx.font = "bold 15px 微软雅黑" //定义字体样式
ctx.textAlign = "start" ;
ctx.fillText(" textAlign取值为start", 250, 30);
ctx.textAlign = "1eft" ;
ctx.fillText(" textAlign取值为left",250, 60);
ctx.textAlign = "end" ;
ctx.fillText(" textAlign取值为end", 250, 90);
ctx.textAlign = "right"
ctx.fillText(" textAlign取值为right",250, 120);
ctx.textAlign = 'center'
ctx.fillText(" textAlign取值为center", 250, 150);
</script>
</body>
浏览器中预览效果
从图中可以看出start和left， end和right的效果类似。
垂直对齐方式
<body>
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
window.onload = function () {
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
//首先绘制一条横线
ctx.strokeStyle = 'purple'
ctx.lineWidth = 5
ctx.moveTo(0, 250)
ctx.lineTo(500, 250)
ctx.stroke()
ctx.textBaseline = "alphabetic" ;
ctx.fillText("alphabetic", 10,250);
ctx.textBaseline = "top";
ctx.fillText("top", 110,250);
ctx.textBaseline = "middle" ;
ctx.fillText(" middle", 160, 250);
ctx.textBaseline = "bottom"
ctx.fillText("bottom",230, 250);
</script>
</body>
浏览器预览效果
关于曲线图形的相关绘制可参考HTML 5 Canvas查看相应的API，canvas 图像绘制
