canvas 圆没有显示

来源：3-2 canvas 入门

harlesliuy

2020-07-13

const canvas = document.getElementById(“canvas”);
const ctx = canvas.getContext(“2d”);
ctx.fillStyle = “red”;//填充色
ctx.fillRect(0, 0, 100, 50); //绘制矩形坐标+大小

/*tip:lineWidth可以由粗变细，不能由细变粗*/
ctx.beginPath();
ctx.lineWidth = 2; //线条宽度
ctx.strokeStyle = 'blue';//线条颜色
ctx.moveTo(200, 100);//开始坐标
ctx.lineTo(250, 250);//结束坐标
ctx.stroke();//结束线段
ctx.lineWidth = 1; //线条宽度
ctx.lineTo(300, 260);//又一段
ctx.stroke();//结束线段线段



ctx.lineWidth = 2;
ctx.strokeStyle = "green";
ctx.fillStyle = "yellow";
ctx.arc(800,800,50,0,2*Math.PI);//圆心坐标，半径，角度
ctx.stroke();
ctx.fill();//填充色

写回答

2回答

扬_灵

2020-07-13

同学你好，在绘制圆形时定义的圆心坐标太大了，超出画布的范围了可以改小一点，在绘制圆形前需要添加ctx.beginPath();在一个画布中开始子路径的一个新的集合，不然圆形添加的颜色会影响到上面的元素。

ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "green";
ctx.fillStyle = "yellow";
ctx.arc(80,80,10,0,2*Math.PI);//圆心坐标，半径，角度
ctx.stroke();
ctx.fill();//填充色

线条变粗是因为canvas 画线的方式并不是从头开始画的，而是从无限细的一像素的中位线的位置开始画的，然后左边占一半右边占一半的方式来画一像素的线条，这个时候计算机是不会绘制小余 1 像素的，所以这个时候就会自然的向左右延伸，这个时候就会出现两个像素的线条了，绘制从1到2的可以参考一下下面的这个案例。

ctx.beginPath();
ctx.lineWidth = 1; //线条宽度
ctx.strokeStyle = 'blue';//线条颜色
ctx.moveTo(60, 60);//开始坐标
ctx.lineTo(50, 100);//结束坐标
ctx.stroke();//结束线段
ctx.translate(0.5,0.5);
ctx.beginPath();
// 绘制第二条线段
ctx.lineWidth = 2; //线条宽度
ctx.moveTo(50, 100);
ctx.lineTo(120, 90);//又一段
ctx.stroke();//结束线段线段

如果不能解决你的问题，可以继续追问。