02canvas图形绘制

最新推荐文章于 2024-07-20 23:54:17 发布

girl_nine

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量44

点赞数

分类专栏： canvas 文章标签： servlet javascript 前端

本文链接：https://blog.csdn.net/girl_nine/article/details/115602919

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

绘制图形步骤

绘制路径步骤
1.开始建立路径：beginPath()
2.向路径集合中添加子路径：
[
   moveTo(x,y); 形状; closePath() 可选,
   moveTo(x,y); 形状; closePath() 可选,
   moveTo(x,y); 形状; closePath() 可选,
]
3.显示路径：填充fill() ，描边stroke()

子路径

1.直线：lineTo(x,y); lineTo(x,y); lineTo(x,y);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>直线</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    //画笔
    const  ctx=canvas.getContext('2d');

    //直线
    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(400,50);
    ctx.lineTo(400,100);
    ctx.closePath();
    ctx.stroke();

</script>
</body>
</html>

2.圆弧：arc(x,y,r，开始弧度，结束弧度，方向)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆弧</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    //画笔
    const  ctx=canvas.getContext('2d');

    //直线
    ctx.beginPath();
    ctx.arc(400,400,200,0,Math.PI*3/2);
    ctx.stroke();
</script>
</body>
</html>

3.切线圆弧：arcTo(x1,y1,x2,y2,r)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆弧</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    //画笔
    const  ctx=canvas.getContext('2d');

    //直线
    ctx.beginPath();
    ctx.arcTo(400,50,400,200,100);
    ctx.stroke();
</script>
</body>
</html>

4. 二次贝塞尔曲线：quadraticCurveTo(cpx1,cpy1,x,y)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆弧</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    //画笔
    const  ctx=canvas.getContext('2d');

    //直线
    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.quadraticCurveTo(400,50,400,200);
    ctx.stroke();
</script>
</body>
</html>

5.三次贝塞尔曲线：bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆弧</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    //画笔
    const  ctx=canvas.getContext('2d');

    //直线
    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.bezierCurveTo(400,50,400,200,700,200);
    ctx.stroke();
</script>
</body>
</html>

6.矩形：rect(x,y,w,h)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆弧</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    //画笔
    const  ctx=canvas.getContext('2d');

    //直线
    ctx.beginPath();
    ctx.beginPath();
    ctx.rect(50,350,400,200);
    ctx.stroke();
</script>
</body>
</html>

girl_nine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02canvas图形绘制

绘制图形步骤绘制路径步骤1.开始建立路径：beginPath()2.向路径集合中添加子路径： [ moveTo(x,y); 形状; closePath() 可选, moveTo(x,y); 形状; closePath() 可选, moveTo(x,y); 形状; closePath() 可选, ]3.显示路径：填充fill() ，描边stroke()子路径1.直线：lineTo(x,y); lineTo(x,y); lineTo(x,y);<...
复制链接

扫一扫