Canvas 是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图。也就是说我们将通过JS完成画图而不是css。 canvas 默认布局为 inline-block，可以认为是一种特殊的图片。 走起 ~ canvas 划线 （宽高不能放在style里面，否则比例不对） canvas里面的width和height相当于图片的原始尺寸，加了外部style的宽高，就相当于对图片进行压缩和拉伸。 // 1、获取原生dom对象 let dom = document.getElementById('can'); // 2、获取绘图对象 let can = dom.getContext('2d'); // 3d是webgl // 定义线条起点 can.moveTo(0,0); // 定义线条中点（非终点） can.lineTo(400,400); can.lineTo(800,0); // 对标记范围进行描边 can.stroke() // 对标记范围进行填充 can.fill(); 设置线条属性 线条默认宽度是 1。 （一定要在绘图之前设置。） can.lineWidth = 2; //设置线条宽度 can.strokeStyle = '#f00'; // 设置线条颜色 can.fillStyle = '#f00'; // 设置填充区域颜色 折线样式 miter：尖角（当尖角长度值过长时会自动变成折角，如果强制显示尖角：can.miterLimit = 100 设置尖角长度阈值。 round：圆角 bevel：折角 can.lineJoin = 'miter'; can.moveTo(100, 100); can.lineTo(300, 100); can.lineTo(100, 200); can.stroke() can.lineJoin = 'round'; can.moveTo(400, 100); can.lineTo(600, 100); can.lineTo(400, 200); can.stroke() can.lineJoin = 'bevel'; can.moveTo(700, 100); can.lineTo(900, 100); can.lineTo(700, 200); can.stroke() 设置线帽 round：加圆角线帽 square：加直角线帽 butt：不加线帽 can.lineCap = 'round'; can.moveTo(100, 100); can.lineTo(300, 100); can.stroke() // 新建绘图，使得上一次的绘画样式不会影响下面的绘画样式（代码加在上一次绘画和下一次绘画中间。） can.beginPath() can.lineCap = 'square'; can.moveTo(100, 200); can.lineTo(300, 200); can.stroke() can.beginPath() can.lineCap = 'butt'; can.moveTo(100, 300); can.lineTo(300, 300); can.stroke() 画矩形 // 参数：x,y,宽，高 can.rect(100,100,100,100); can.stroke(); // 画完即填充 can.fillRect(100,100,100,100); 画圆弧 // 参数：圆心x，圆心y，半径，圆弧起点与圆心的夹角度数，圆弧终点与圆心的夹角度数，true（逆时针绘画） can.arc(500,300,200,0,2*Math.PI/360*90,false); can.stroke() 示例： can.moveTo(500,300); can.lineTo(500 + Math.sqrt(100), 300 + Math.sqrt(100)) can.arc(500, 300, 100, 2 * Math.PI / 360 *startDeg, 2 * Math.PI / 360 *endDeg, false); can.closePath()//将图形起点和终点用线连接起来使之成为封闭的图形 can.fill() Tips: 1、can.beginPath() // 新建绘图，使得上一次的绘画样式不会影响下面的绘画样式（代码加在上一次绘画和下一次绘画中间。） 2、can.closePath() //将图形起点和终点用线连接起来使之成为封闭的图形。 旋转画布 can.rotate(2*Math.PI/360*45); // 一定要写在开始绘图之前 can.fillRect(0,0,200, 10); 旋转整个画布的坐标系（参考坐标为画布的(0,0)位置） 缩放画布 can.scale(0.5,2); can.fillRect(0,0,200, 10); 示例： 整个画布：x方向缩放为原来的0.5，y方向拉伸为原来的2倍。 画布位移 can.translate(100,100) can.fillRect(0,0,200, 10); 保存与恢复画布状态 can.save() // 存档：保存当前画布坐标系状态 can.restore() // 读档：恢复之前保存的画布坐标系状态 需要正确坐标系绘图的时候，再读档之前的正确坐标系。 can.restore() // 将当前的画布坐标系状态恢复成上一次保存时的状态 can.fillRect(dom.width/2, dom.height/2, 300, 100) 指针时钟（案例） 圆弧时钟（案例） （啾咪 ^.<） 分类: Web 标签: canvas 关注我 收藏该文 0 1 « 上一篇： 前端面试知识点 https://www.cnblogs.com/lvonve/p/11937705.html