Canvas绘制三角形和圆形

image.png

绘制填充三角形

image.png

1
2
3
4
5
6
7
// 填充三角形
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(50,150);
ctx.lineTo(150,150);
ctx.fillStyle = 'red';// 填充颜色
ctx.fill();

image.png

1
2
3
4
5
6
7
8
9
// 描边三角形
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(50,150);
ctx.lineTo(150,150);

ctx.closePath();
ctx.strokeStyle = "#0000FF";// 线条颜色
ctx.stroke();

绘制圆形之前,先看一下下面这个图
image.png

原文链接:Canvas arc()

  • 画一个整个圆

image.png

1
2
3
4
5
// 绘制圆形
ctx.beginPath();
ctx.arc(200,200,50,0,Math.PI*2,true);
ctx.strokeStyle = "#4ACAD9";
ctx.stroke();
  • 画一个半圆

image.png

1
ctx.arc(200,200,50,0,Math.PI*1,true);
  • 画一个四分之一的圆弧
    image.png
1
2
3
ctx.arc(200,200,50,0,Math.PI*1.5,true);
ctx.moveTo(350,150);
ctx.arc(300,150,50,0,Math.PI*0.5,false);
  • 画一个四分之三的圆弧
    image.png
    1
    2
    3
    ctx.arc(200,200,50,0,Math.PI*1.5,false);
    ctx.moveTo(380,200)
    ctx.arc(330,200,50,0,Math.PI*0.5,true)

如果把生成改成fill来填充的话,则会变成这样

image.png

1
2
3
4
5
6
ctx.beginPath();
ctx.arc(200,200,50,0,Math.PI*1.5,true);
ctx.moveTo(380,200);
ctx.arc(330,200,50,0,Math.PI*0.5,false)
ctx.fillStyle = "#4ACAD9";
ctx.fill();

image.png

image.png