canvas复习笔记（绘制直线、矩形、圆形、圆弧）
canvas 画一条直线
<body><canvasid="c"width="300"height="200"style="border: 1px solid #ccc;"></canvas>
</body><script>// 2、获取 canvas 对象const cnv = document.getElementById("c");// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext("2d");// 4、绘制图形cxt.moveTo(100, 100); // 起点坐标 (x, y)cxt.lineTo(200, 100); // 终点坐标 (x, y)cxt.stroke(); // 将起点和终点连接起来</script>
画两条直线
<script>// 2、获取 canvas 对象const cnv = document.getElementById("c");// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext("2d");// 4、绘制图形cxt.moveTo(100, 100); // 起点坐标 (x, y)cxt.lineTo(200, 100); // 终点坐标 (x, y)cxt.stroke(); // 将起点和终点连接起来cxt.moveTo(80, 60); // 起点坐标 (x, y)cxt.lineTo(180, 60); // 终点坐标 (x, y)cxt.stroke(); // 将起点和终点连接起来
</script>会发现两条直线的颜色不一致。
线的中心点会和画布像素点的底部对齐，所以会线中间是黑色的，但由于一个像素就不能再切割了，所以会有半个像素被染色，就变成了浅灰色。
设置宽度和线条颜色
<script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')// 4、绘制图形cxt.moveTo(100, 100) // 起点坐标 (x, y)cxt.lineTo(200, 100) // 终点坐标 (x, y)cxt.stroke() // 将起点和终点连接起来cxt.moveTo(80, 60) // 起点坐标 (x, y)cxt.lineTo(180, 60) // 终点坐标 (x, y)// 修改直线的宽度cxt.lineWidth = 2// 修改直线的颜色cxt.strokeStyle = 'pink'cxt.stroke() // 将起点和终点连接起来</script>
发现如何设置lineWidth为1， 线条会有部分灰色。
发现上面设置样式，两条直线颜色都是同时修改的，如果需要每条直线设置不同的样式，需要使用新开路径，避免污染
就是在开始另画一条直线时，需要使用beginPath()新开路径
<script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')// 4、绘制图形cxt.moveTo(100, 100) // 起点坐标 (x, y)cxt.lineTo(200, 100) // 终点坐标 (x, y)cxt.stroke() // 将起点和终点连接起来cxt.beginPath() // 重新开启一个路径cxt.moveTo(80, 60) // 起点坐标 (x, y)cxt.lineTo(180, 60) // 终点坐标 (x, y)// 修改直线的宽度cxt.lineWidth = 2// 修改直线的颜色cxt.strokeStyle = 'pink'cxt.stroke() // 将起点和终点连接起来</script>
就会发现第一条直线时默认的颜色，第二条样式有更改。
画折线
画折线，可以多使用几个lineTo实现
<script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')// 4、绘制图形cxt.moveTo(100, 100) // 起点坐标 (x, y)cxt.lineTo(200, 100) // 终点坐标 (x, y)cxt.stroke() // 将起点和终点连接起来cxt.beginPath() // 重新开启一个路径cxt.moveTo(80, 60) // 起点坐标 (x, y)cxt.lineTo(180, 60) // 终点坐标 (x, y)cxt.lineTo(180, 10) // 终点坐标 (x, y)// 修改直线的宽度cxt.lineWidth = 2// 修改直线的颜色cxt.strokeStyle = 'pink'cxt.stroke() // 将起点和终点连接起来</script>
绘制矩形
使用strokeRect 和fillRect画矩形
<script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')cxt.strokeStyle = 'blue'cxt.strokeRect(40, 40, 140, 80);//(x,y,width, height)cxt.strokeStyle = 'pink'cxt.strokeRect(80, 80, 140, 80);//(x,y,width, height)cxt.fillStyle = 'orange'cxt.fillRect(10, 10, 50, 100)</script>
可以看出，后面fillRect会遮挡之前画出的矩形
使用rect画矩形，需要调用stroke或者fill来完成。
clearRect用于清除矩形
请空画布
cxt.clearRect(0, 0, cnv.width, cnv.height)
当画多边形，使用使用closePath()来闭合，否则拐角就出现“不正常”现象。
<body><canvas id="c" width="300" height="500" style="border: 1px solid #ccc;"></canvas>
</body><script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')cxt.moveTo(50, 50)cxt.lineTo(200, 50)cxt.lineTo(200, 200)// 手动闭合cxt.closePath()cxt.lineJoin = 'miter' // 线条连接的样式。miter: 默认; bevel: 斜面; round: 圆角cxt.lineWidth = 20cxt.stroke()</script>
拐角样式 lineJoin
属性值包括：
miter: 默认值，尖角
round: 圆角
bevel: 斜角
线帽 lineCap
属性值包括：
butt: 默认值，无线帽
square: 方形线帽
round: 圆形线帽
虚线 setLineDash()
虚线分3种情况.需要传入一个数组，且元素是数值型。
只传1个值
有2个值
有3个以上的值
arc()画圆
开始角度和结束角度，都是以弧度为单位。例如 180°就写成 Math.PI ，360°写成 Math.PI * 2
counterclockwise，true为顺时针方向， false为逆时针方向，默认为false
arc(x, y, r, sAngle, eAngle，counterclockwise)
在实际开发中，为了让自己或者别的开发者更容易看懂弧度的数值，1°应该写成 Math.PI / 180。
100°: 100 * Math.PI / 180
110°: 110 * Math.PI / 180
241°: 241 * Math.PI / 180
注意：绘制圆形之前，必须先调用 beginPath() 方法！！！ 在绘制完成之后，还需要调用 closePath() 方法！！！
一个完整的圆
<script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')cxt.beginPath()cxt.arc(150, 150, 100, 0, 360 * Math.PI / 180) // 顺时针cxt.closePath()cxt.stroke()</script>半圆
<script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')cxt.beginPath()cxt.arc(150, 150, 100, 0, 180 * Math.PI / 180) // 顺时针cxt.closePath()cxt.stroke()</script>arc画圆弧
如果想画弧线，调用arc函数，最后不调用closePath()
画出一条在上的弧线
<script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')cxt.beginPath()cxt.arc(150, 150, 100, 0, 180 * Math.PI / 180, true) // 顺时针cxt.stroke()</script>
比较常用的一个功能，用canvas绘制带有圆角的图片
function drawRoundedRect(ctx, x, y, width, height, radius) {ctx.moveTo(x + radius, y)ctx.lineTo(x + width - radius, y)ctx.arc(x + width - radius, y + radius, radius, 1.5 * Math.PI, 2 * Math.PI)ctx.lineTo(x + width, y + height - radius)ctx.arc(x + width - radius, y + height - radius, radius, 0, 0.5 * Math.PI)ctx.lineTo(x + radius, y + height)ctx.arc(x + radius, y + height - radius, radius, 0.5 * Math.PI, 1 * Math.PI)ctx.lineTo(x, y + radius)ctx.arc(x + radius, y + radius, radius, 1 * Math.PI, 1.5 * Math.PI)}arcTo() 画弧线
语法
arcTo(cx, cy, x2, y2, radius)
//切断横坐标，切点纵坐标， 结束点横坐标， 结束点纵坐标， radius半径
ctx.moveTo(20,20); // 创建开始点
ctx.lineTo(100,20); // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,120); // 创建垂直线
平方贝塞尔曲线
ctx.moveTo(100,100);
ctx.quadraticCurveTo(200,125,100,150);
三次方贝塞尔曲线
ctx.moveTo(150,0);
ctx.bezierCurveTo(0,125,300,175,150,300);
描边 strokeText()
strokeText(text, x, y, maxWidth)
text:字符串，要绘制的内容x:横坐标，文本左边要对齐的坐标（默认左对齐）y:纵坐标，文本底边要对齐的坐标maxWidth:可选参数，表示文本渲染的最大宽度（px），如果文本超出 maxWidth 设置的值，文本会被压缩。
填充文本 fillText
fillText(text, x, y, maxWidth)
设置填充颜色
fillStyle()
获取文本长度 measureText()
measureText().width 方法可以获取文本的长度，单位是 px 。
cxt.measureText(text).width
注：本文图片及代码部分都来源于网络。