canvas

最新推荐文章于 2023-10-30 23:25:34 发布

kingov

最新推荐文章于 2023-10-30 23:25:34 发布

阅读量299

点赞数

分类专栏： 1.2 JavaScript 文章标签： canvas

本文链接：https://blog.csdn.net/kingov/article/details/72528589

版权

1.2 JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

- canvas的定义
- canvas的基本方法

canvas的定义

canvas 是 HTML5 提供的一个用于展示绘图效果的标签

canvas的基本方法

getContext方法

语法: Canvas.getContext( typeStr )
该方法用于绘制上下文工具.
如果是绘制平面图形使用 ‘2d’ 作为参数, 如果绘制立体图形使用 ‘webgl’

使用 ‘2d’ 返回 CanvasRenderingContext2D 类型的对象.
使用 ‘webgl’ 返回 WebGLRenderingContext 类型的对象.

moveTo方法

语法: CanvasRenderingContext2D.moveTo( x, y )

该方法用于设置绘制起点.
其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.

lineTo 方法

语法: CanvasRenderingContext2D.lineTo( x, y )

该方法用于设置需要绘制直线的另一个点. 最终描边后会连线当前点和方法参数描述的点.
其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.

stroke 方法

语法: CanvasRenderingContext2D.stroke()

该方法用于连线, 将描述的所有点按照指定顺序连接起来.

绘制一条直线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas{
            border:1px solid red;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
<script>
    //备注：canvas画布的左上角顶点是坐标原点(0,0)，
    // 从原点往右是x轴的正方向，
    // 从原点往下是y轴的正方向

    //1、获取canvas标签
    var canvas=document.querySelector("canvas");
    //2、获取上下文：提供了一系列的绘图工具
    var ctx=canvas.getContext("2d");
    //      ctx是CanvasRenderingContext2D构造函数的实例
    //3、指定一个起点
    ctx.moveTo(50,50);
    //4、从起点到终点拉一条直线
    ctx.lineTo(150,150);
    //5、描边
    ctx.stroke();

</script>
</html>

绘制一个三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas{
            border:1px solid red;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
<script>
    var canvas=document.querySelector("canvas");
    var ctx=canvas.getContext("2d");
    //起始点设置为（50,50）
    ctx.moveTo(50,50);
    //从起始点移动到点（50,200）
    ctx.lineTo(50,200);
    //移动到点（200,200）
    ctx.lineTo(200,200);
    //移动到点（50,50）
    ctx.lineTo(50,50);
    //设置绘制样式
    ctx.strokeStyle="blue";
    //描边
    ctx.stroke();

</script>
</html>

fill和fillStyle方法

语法: CanvasRenderingContext2D.fill()
描述: 该方法会按照描绘的点的路径来填充图形. 默认是黑色.

填充一个矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas>
</body>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    //绘制一个矩形框
    ctx.moveTo(50,50);
    ctx.lineTo(250,50);
    ctx.lineTo(250,200);
    ctx.lineTo(50,200);
    ctx.lineTo(50,50);

    //设置描边颜色为red
    ctx.strokeStyle="red";
    //开始描边
    ctx.stroke();

    //产生一个填充的矩形
    //指定填充的颜色pink
    ctx.fillStyle="pink";
    //填充矩形
    ctx.fill();
</script>
</html>

非零环绕

对于路径中指定范围区域，从该区域内部画一条足够长的线段，使此线段的完全落在路径范围之外

绘制一个中空的矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas>
</body>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    //指定外边的矩形的轨迹
    ctx.moveTo(50,50);
    ctx.lineTo(250,50);
    ctx.lineTo(250,200);
    ctx.lineTo(50,200);
    //指定内边的矩形的轨迹
    ctx.moveTo(70,70);
    ctx.lineTo(70,150);
    ctx.lineTo(200,150);
    ctx.lineTo(200,70);

    //填充
    ctx.fill();
</script>
</html>

kingov

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas

canvas的定义canvas的基本方法getContext方法moveTo方法lineTo 方法stroke 方法绘制一条直线绘制一个三角形fill和fillStyle方法填充一个矩形非零环绕绘制一个中空的矩形canvas的定义canvas 是 HTML5 提供的一个用于展示绘图效果的标签canvas的基本方法getContext方法语法: Canvas.getContext
复制链接

扫一扫