初识canvas
canvas 我们可以理解为是一个画布。 它是一个载体。 我们的文字，图案，都是在这个载体(画布)上来进行操作的。
canvas的5个要素
canvas 具有的5个要素： 1.id 元素的唯一标识 2.width 宽度 3.height 高度 4.画笔,上下文 canvas.getContext('2d') 5.内容(文字，图形，其他)
canvas 有两种形式的绘制模式
canvas 有两种形式的绘制模式: 1.填充模式(我们可以理解为是实心的) 如：ctx.fillRect 2.路径模式(空心,线段连成的图案): 由一系列的点连成的线段 ctx.strokeRect
使用ctx.fillRect(x,y,width,height)绘制一个矩形【填充模式】
<body> <canvas id="canvas" width="1000" height="500" ></canvas> </body> <script> let canvas =document.getElementById('canvas') // 获取画笔(上下文) let ctx= canvas.getContext('2d') // 绘制一个矩形 fillRect(x坐标,y坐标,宽度，高度) ctx.fillRect(100,100,200,20) </script>
使用 ctx.strokeRect(x,y,width,height)绘制一个矩形【路径模式】
let ctx= canvas.getContext('2d') ctx.strokeRect(100,100,200,20);
使用canvas绘制一个圆环图
1.我们绘制圆环图。需要使用 content.arc这个方法 2.绘制当前的进度 ctx.arc(x,y,r,0, Math.PI / 180 *( 360 * jinDu/ 100)); 3.在圆环中间添加文字 4.解决清晰度的问题
content.arc(圆点x, 圆点y, 半径, 初始角度0, 结束角度Math.PI) 绘制圆弧;
content.arc(圆点x, 圆点y, 半径, 初试角度0, Math.PI, false); 上面这个方法是绘制圆弧的。 Math.PI 是180度。 如果初始角度0，结束角度Math.PI是整个圆弧的角度， 默认顺时针false, 逆时针true content.arc(300, 300, 100,0, Math.PI); content.stroke(); 现在我们绘制了一个圆弧，现在我们来绘制一个圆环
绘制一个圆环(带有线宽)
<body> <canvas id="canvas" width="400" height="400"> </body> <script type="text/javascript"> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); // 开始画线 ctx.beginPath(); ctx.arc(200,200,100,0, 2*Math.PI); // 线宽 ctx.lineWidth=20; // 线的颜色 ctx.strokeStyle = '#a0a' // 绘制形状的轮廓。这个有的小伙伴不太理解。我详细说下。 ctx.stroke(); </script>
stroke()的理解
canvas中的stroke()的方法，用于在Canvas上绘制形状的轮廓。 我的理解：当我们使用stroke()方法后。 Canvas会使用当前的线宽、线条样式（如实线、虚线等）以及线条颜色等属性。 沿着之前定义的路径或形状的外边缘进行绘制。 线条会从形状的起点延伸至终点，形成了一个封闭的轮廓。 因此：当我们使用 ctx.lineWidth=20; // 定义线宽 ctx.strokeStyle = '#a0a' // 线的颜色 如果最后不使用 ctx.stroke(); 无法在画笔上进行绘制轮廓
绘制当前的进度
<body> <canvas id="canvas" width="400" height="400"> </body> <script type="text/javascript"> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); ctx.beginPath(); ctx.arc(200,200,100,0, 2*Math.PI); // 线宽 ctx.lineWidth=20; // 线的颜色 ctx.strokeStyle = '#ccc' // 绘制形状的轮廓。 ctx.stroke(); ctx.beginPath(); // 当前进度 let jinDu = 80 // 占比 ctx.arc(200,200,100,0, Math.PI / 180 *( 360 * jinDu/ 100)); // 线宽 ctx.lineWidth=20; // 线的颜色 ctx.strokeStyle = '#a1a' // 绘制形状的轮廓。 ctx.stroke(); </script> </html>
给圆环中间设置文字描述
// 设置位置的位置 ctx.fillStyle='#a1a'; //颜色 ctx.textAlign='center'; // 水平居中 ctx.textBaseline='middle'; // 垂直居中 ctx.fillText(`项目完成进度${jinDu}%`,200,200) // 文字描述
