canvas context2d绘制路径

最新推荐文章于 2021-02-21 13:57:46 发布

黑发

最新推荐文章于 2021-02-21 13:57:46 发布

阅读量533

点赞数 1

分类专栏： html canvas核心技术学习笔记文章标签： html5 图形 canvas 2d js

本文链接：https://blog.csdn.net/qq_20725287/article/details/45536221

版权

html canvas核心技术学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一canvasRanderingConetxt2D之中与路径相关的方法

1 arc(x,y,r,angle1,angle2,boolean),其参数分别是x，y坐标点，起始角度angle1, 结束角度angle2 ,,boolean取决绘制是顺时针还是逆时针

2 rect(x,y,width,height)参数x,y,坐标，矩形的宽width，高height,该方法总是按逆时针方向创建路径

3 beginPath()将之前的所有之路径全部清除掉，重置路径。新路径。

4 closePath() 用于封闭圆弧路径，封闭曲线和线段组成的开放路径

5 fill()使用fillstyle填充路径内部，（所有每当你调用fillstyle，就要调用fill(),这是一对组合）

6 stroke()使用strokestyle对路径轮廓描绘（所有每当你调用strokestyle，就要调用strokel(),这又是一对组合，我们不能拆分他们啊！！）

二：路径与子路径

我们先来看一下效果：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="radios">
    <input type="radio" id="radio"/>hello
    <canvas id="canvas" width="600" height="600">
        canvas is not support!
    </canvas>
    <script>
        var canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');
        context.lineWidth=5;
        context.strokeStyle='blue';
        context.fillStyle='red';
        context.beginPath();
        context.arc(50,50,50,0,Math.PI/2);
        context.closePath();
        context.stroke();
        context.beginPath();
        context.rect(100,100,100,100);
        context.fill();

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

结果：

代码二：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="radios">
    <input type="radio" id="radio"/>hello
    <canvas id="canvas" width="600" height="600">
        canvas is not support!
    </canvas>
    <script>
        var canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');
        context.lineWidth=5;
        context.strokeStyle='blue';
        context.fillStyle='red';
        context.beginPath();
        context.arc(50,50,50,0,Math.PI/2);
        context.closePath();
        context.stroke();
//        context.beginPath();
        context.rect(100,100,100,100);
        context.fill();

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

结果：

不要睁眼说瞎话，说你没看到。不能愉快地做朋友了。

三总结：如果没加第二个beginPath，fill()会对第一个路径重复（额外）绘制。当添加第二个beginPath方法重置了绘制的路径，这是fill（）就不会对第一个图形产生影响了。。而是只对当前路径专一。。。

黑发

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas context2d绘制路径

一canvasRanderingConetxt2D之中与路径相关的方法1 arc(x,y,r,angle1,angle2,boolean),其参数分别是x，y坐标点，起始角度angle1, 结束角度angle2 ,,boolean取决绘制是顺时针还是逆时针2 rect(x,y,width,height)参数x,y,坐标，矩形的宽width，高height,该方法总是按逆时针方向创建路径
复制链接

扫一扫