① 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畫布上指定區域+橡皮擦功能實現；在畫布上平鋪指定圖片；在畫布上繪制文本；總結案例之刮刮樂功能實現）