canvas context2d绘制路径

来源：互联网发布：女友拉屎知乎编辑：程序博客网时间：2024/06/06 01:20

一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（）就不会对第一个图形产生影响了。。而是只对当前路径专一。。。

0 0