① canvas前端页面中有很多小方格，怎么画
。方格将作为折线图的基准线。绘制方格图的逻辑很简单，只要在canvas上绘制一系列的横线和竖线即可。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>绘制方格图</title>
</head>
<body>
<canvasid="canvas"width="300"height="300"></canvas>
<scripttype="text/javascript">
//获取上下文
varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
//描绘背景
vargradient=ctx.createLinearGradient(0,0,0,300);//createLinearGradient()方法创建线性的渐变对象。
gradient.addColorStop(0,"#e0e0e0");
gradient.addColorStop(1,"#ffffff");
ctx.fillStyle=gradient;
ctx.fillRect=(0,0,canvas.width,canvas.height);
//描绘边框
vargrid_cols=10;
vargrid_rows=10;
varcell_height=canvas.height/grid_rows;
varcell_width=canvas.width/grid_cols;
ctx.lineWidth=1;
ctx.strokeStyle="#a0a0a0";
//结束边框描绘
ctx.beginPath();
//准备画横线
for(varcol=0;col<=grid_cols;col++)
{
varx=col*cell_width;
ctx.moveTo(x,0);
ctx.lineTo(x,canvas.height);
}
//准备画竖线
for(varrow=0;row<=grid_rows;row++)
{
vary=row*cell_height;
ctx.moveTo(0,y);
ctx.lineTo(canvas.width,y);
}
//完成描绘
ctx.stroke();
</script>
</body>
</html>
② 有没有前端的前辈，这样的边框怎么做
将这个图片设为背景，然后给相应的内边距就可以做到了
③ 前端web的点9图效果实现
这里只是一个怕自己忘记写的一个笔记，不是很全很详细，建议还是看 官方教程
图片原始像素是348 x 220
我的需求是拉伸image可以自适应内容长度，但是拉伸不能导致两边的半圆被拉成椭圆
border-image可以使用图片作为border(标准说法：border-image CSS属性允许在元素的边框上绘制图像), 给出图片后可以通过相应的参数来调整图片的拉伸，这样就可以像点9图那样保留部分内容不变的情况下，拉伸可拉伸部分来自适应。
我主要解释一下 border-image: url("") 0 170 0 170 fill / 1px 170px stretch ,
这里0 170 0 170就是划分了原始图片内容,称之为border-image-slice
后面的 1px 170px 指的是border-image-width ，字面意思是边框图片宽度，作用是将 DOM 节点分割成九宫格，这里指的就是作为实际容器的那个节点的显示范围了，我也设置为170， stretch作为border-image-repeat说明图片在超过原始长度后使用拉伸的方式
这里有更易读，更详细的文章 border-image的正解用法
点九图编辑器
https://developer.mozilla.org/zh-CN/docs/web/css/css_backgrounds_and_borders/border-image_generator (这个加载不出预览图)
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator （这个可以加载出预览图）
④ html5 canvas在img标签的图片上绘制矩形框、矩形框为1px时线条模糊问题
前端需要在后端返回的图片集合里，根据提供的对角线坐标绘制矩形。矩形可能是多个。效果达到如下：
1、根据后端返回的图片list，生成canvas画布，
2、把图片画到canvas里面，再根据后端返回的坐标，在canvas里画矩形框。
此项目中，后端返回的坐标是基于缩略图的，但是前端渲染在页面上的图片，会按宽为788px来显示，所以坐标应该要按照比例来算。
真实的左上x点的计算方式为：真实宽 / 压缩宽 * 压缩x点
https://blog.csdn.net/qq_29594393/article/details/52849339
https://www.runoob.com/w3cnote/html5-canvas-intro.html
https://www.imooc.com/wenda/detail/551496
https://blog.csdn.net/qq_44907926/article/details/114907056?spm=1001.2014.3001.5501
①画矩形时，如果里面的参数有不是整数的话，容易导致边框粗细不一等问题。
②当矩形的边框lineWidth设置为1px时候，会出现线条模糊的问题。
关于第②个问题的延申：
这是测试提给我的bug：
我的思路存在的问题：
首先，同样是矩形的边框我同样设置的都是1px，不应该有的线条颜色深，有的颜色淡啊，排除了参数没有取整的问题后，我怀疑了颜色red在画布上的渲染问题，换成十六进制的同样有问题。就在我一筹莫展的时候，我叫来了小伙伴，我说你看这线条颜色是不是不一样，我开始怀疑我的眼神有问题。小伙伴说，你给线条整粗点看看这问题明显吗。我把边框线条设置了2px，发现和1px的粗细是一样的，并且颜色一样了线条不模糊了。换成别的宽度，只要不是1px都没有问题了。
思维的问题在于，我网络问题的描述有问题，我之前一直搜canvas绘制矩形线条深浅不一，我应该搜canvas矩形线条模糊。我排查问题的时候，固定思维模式觉得1px写的没错，却没有尝试排查。
关于这个问题的详细解答与解决办法：
canvas1px线条模糊
我的理解
canvas的线条画法不一样，canvas的每条线都有一条无限细的“中线”，线条的宽度是从中线向两侧延伸的，也就是说canvas绘制1px的时候，是中线向左右两边延申各取0.5，并不是向某一边延申（如果只是往右延申就不再是问题了），此时问题出现了，计算机不允许出现小于1px的图形，所以他做了一个折中的事：把这两个像素都绘制了。所以，如此一来，本来1px的线条，就成了看起来2px宽的线条。
延申：
HTML 5 Canvas详细讲解 ———— 第二篇（清除canvas画布上指定区域+橡皮擦功能实现；在画布上平铺指定图片；在画布上绘制文本；总结案例之刮刮乐功能实现）