你画的圆有两个部分组成
1圈外线条，2圈内面积。
arc方法默认线条为黑色，设置方法为ctxstrokeStyle=“color”
fill方法只能改变圈内的颜色。
也就是你的代码画的圆实际上是个边界为黑，里面为red或green的圆。你只需要在你原本代码的ctx方法后加句crxstrokeStyle='blue'就能消除。
。方格将作为折线图的基准线。绘制方格图的逻辑很简单，只要在canvas上绘制一系列的横线和竖线即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制方格图</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script type="text/javascript">
//获取上下文
var canvas=documentgetElementById("canvas");
var ctx=canvasgetContext("2d");
//描绘背景
var gradient=ctxcreateLinearGradient(0,0,0,300);//createLinearGradient() 方法创建线性的渐变对象。
gradientaddColorStop(0,"#e0e0e0");
gradientaddColorStop(1,"#ffffff");
ctxfillStyle=gradient;
ctxfillRect=(0,0,canvaswidth,canvasheight);
//描绘边框
var grid_cols=10;
var grid_rows=10;
var cell_height=canvasheight/grid_rows;
var cell_width=canvaswidth/grid_cols;
ctxlineWidth=1;
ctxstrokeStyle="#a0a0a0";
//结束边框描绘
ctxbeginPath();
//准备画横线
for(var col=0;col<=grid_cols;col++)
{
var x=colcell_width;
ctxmoveTo(x,0);
ctxlineTo(x,canvasheight);
}
//准备画竖线
for(var row=0;row<=grid_rows;row++)
{
var y=rowcell_height;
ctxmoveTo(0,y);
ctxlineTo(canvaswidth,y);
}
//完成描绘
ctxstroke();
</script>
</body>
</html>
以上就是关于html canvas 画圆覆盖后为什么会有个边框全部的内容，包括:html canvas 画圆覆盖后为什么会有个边框、canvas前端页面中有很多小方格，怎么画、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）