浅谈HTML5中canvas中的beginPath()和closePath()的关键

2019-10-13 04:24 来源:未知

说起beginPath就不得不提一下closePath,事实上两者并无涉及,closePath的意味是关闭路线,不是得了路线,它只是将路线的终端与源点相接,不是初叶一个新路径。

扫除画布

ctx.clearRect(x, y, width, height);

x
矩形起源的 x 轴坐标。
y
矩形源点的 y 轴坐标。
width
矩形的小幅。
height
矩形的冲天。

图片 1

var ctx=document.getElementById("canvas").getContext("2d");
    ctx.beginPath();
    ctx.rect(150,150,100,100);
    ctx.fillStyle="green";
    ctx.fill();
    ctx.rect(0,0,100,100);
    ctx.fillStyle="yellow";
    ctx.fill();

画一条直线

//状态设置
context.moveTo(100,100); //想象一支画笔放在(100,100)这个点上
context.lineTo(700, 700); //然后移动到(700, 700)



//绘制
context.stroke() 

canvas中的绘图是一种基于状态的绘图
有的别样的情事:

  • context.lineWidth //线条宽度
  • context.strokeStyle //设置图形轮廓的水彩
context.lineWidth = 5;
context.strokeStyle = "#005588"; 

 

beginPath的意义比非常粗大略,正是从头一段新的门路,但在动用canvas绘图的长河中却不行关键

画贰个三角型

context.moveTo(100, 100);
context.lineTo(700, 700);
context.lineTo(100,700);
context.lineTo(100,100);

context.stroke();

绘制状态

  • context.fillStyle //图形填充颜色

绘制方法

  • context.fill() //填充图形

小心:当您调用fill()函数时,全体未有密封的形象都会自行关闭,所以您没有供给调用closePath()函数。而那并非stroke()所具备的。

实际上,canvas中的绘制方法(fill,stoke),都会以上贰回“beginPath”之后的具有路子举办绘图,在上边包车型客车代码中率先个矩形fill了两遍,第贰遍金黄,第叁回宝蓝,所以获得了七个鲜蓝矩形,同样的对于画线段,或其余曲线,图形,不管你moveTo到哪,只要您从未beigin帕特h,你都以在画一条渠道。

HTML

<canvas id='canvas' width="500" height="300"></canvas>

//内定宽高使用性质width和height来内定,不要用css,
css钦赐的是标签展现的轻重实际不是画布的高低

图片 2

一经你画的图纸和您想像的不均等,记得查看一下begin帕特h。

画圆

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

x
圆弧中央(圆心)的 x 轴坐标。
y
圆弧大旨(圆心)的 y 轴坐标。
radius
圆弧的半径。
startAngle
圆弧的起首点, x轴方向初叶总结,单位以弧度表示。
endAngle
圆弧的终极, 单位以弧度表示。

anticlockwise 方向 默以为顺时针

效果图:

 

绘制几个图形

context.moveTo(100, 100);
context.lineTo(700, 700);
context.lineTo(100,700);
context.lineTo(100,100);


context.lineWidth = 5;
context.strokeStyle = "red"; 
context.stroke();

context.moveTo(200, 100);
context.lineTo(800, 700);


context.strokeStyle = "blue";
context.stroke();

地点的代码绘制了四个三角形会一条直线,然则他们的线条颜色都以blue
由来:canvas是依照状态的,第叁个context.stroke()绘制后, 第一个到context.stroke()的绘图状态包括从代码定义初步的富有情状,覆盖了第2个context.stroke()绘制的图片

  • context.beginPath()
    浮动路线的第一步叫做beginPath()。本质上,路线是由很多子路线构成,那些子路线都以在三个列表中,全体的子路线(线、弧形、等等)构成图形。而每一次那么些格局调用之后,列表清空复位,然后大家就能够再次绘制新的图形。

    简言之来讲便是清空从前的景色

  • context.closePath()

    正是关闭路线close帕特h(),不是要求的。这么些方法会通过绘制一条从前段时间点到起来点的直线来关闭图形。如若图形是早就关闭了的,即当前点为开端点,该函数什么也不做。

以这事例使用贝塞尔曲线绘制心形。


倒计时

  • animation
setInterval(function(){
    render() //绘制画面
    update() //调整数据结构
})

strokeRect(x, y, width, height)  绘制贰个矩形的边框;

大家的代码未有不当,但得到的却是三个边长100px的艳情的长方形,并非一绿一黄,那是怎么吗?

javascript

var canvas = document.getElementById('canvas');
//绘图的上下文环境
var context = canvas.getContext('2d');

//使用context来开展绘图

静心:当前路径为空,即调用beginPath()之后,恐怕canvas刚建的时候,第一条渠道构造命令常常被视为是moveTo(),无论最后的是哪些。出于这些原因,你大致连接要在安装路线之后特地钦定你的苗子地方。
其次步正是调用函数内定绘制路线,等下回简要介绍。

但大家在背后增加一个beginPath,则收获七个例外颜色的矩形。

canvas

其三,正是密闭路线closePath(),不是不能缺少的。那一个方法会通过绘制一条从此时此刻点到开头点的直线来关闭图形。假使图形是曾经关闭了的,即当前点为开始点,该函数什么也不做。

一言以蔽之,不要试图通过关闭一段路线来早先新的路线,而且一旦你不闭合路线,即便开头新的门径,其也不会闭合。

<canvas id="canvas" width="400" height="400">你的浏览器不支持canvas</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(200,200,100,0,Math.PI*2,false);
    ctx.stroke();
</script>    

笔者们在上边代码中率先个fill的末尾增加三个closePath,获得的仍是八个石黄矩形。

效果图:

先来看一小段代码:

 

图片 3

举个例子画个矩形:

quadraticCurveTo (kx,ky,ex,ey) :一次贝塞尔曲线,七个调整点,多个终端。

canvas提供了三种方式绘制矩形

<canvas id="canvas" width="400" height="400">你的浏览器不支持canvas</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();//开始一个路径
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.lineTo(300,300);
    ctx.closePath();//闭合路径
    ctx.fill();
</script>

beginPath()
新建一条路线,生成之后,图形绘制命令被针对到路径上生成路径。
closePath()
关掉路线之后图片绘制命令有重复指向到上下文中。
stroke()
通过线条来绘制图形概况。
fill()
透过填写路线的剧情区域调换图形。
浮动路线的首先步叫做begin帕特h()。本质上,路线是由非常多子路线构成,这个子路线都是在三个列表中,全体的子路线(线、矩形、等等)构成图形。而每回这一个格局调用之后,列表清空重新初始化,然后大家就可以再次绘制新的图样。

图片 4

一遍贝塞尔曲线

<canvas id="canvas" width="400" height="400">你的浏览器不支持canvas</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    //绘制矩形
    ctx.fillRect(100,100,200,200);
    ctx.clearRect(150,150,100,100);
    ctx.strokeRect(160,160,80,80);
</script>

 

clearRect(x, y, width, height)   清除钦命矩形区域,让清除部分完全透明。

二次贝塞尔曲线

<canvas id="canvas" width="400" height="400">你的浏览器不支持canvas</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
        ctx.beginPath();
    ctx.moveTo(75,40);
    ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.bezierCurveTo(20,80,40,102,75,120);
    ctx.bezierCurveTo(110,102,130,80,130,62.5);
    ctx.bezierCurveTo(130,62.5,130,25,100,25);
    ctx.bezierCurveTo(85,25,75,37,75,40);
    ctx.fill();
</script>    

贝塞尔曲线:

<canvas id="canvas" width="400" height="400">你的浏览器不支持canvas</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(75,25);
        ctx.quadraticCurveTo(25,25,25,62.5);
        ctx.quadraticCurveTo(25,100,50,100);
        ctx.quadraticCurveTo(50,120,30,125);
        ctx.quadraticCurveTo(60,120,65,100);
        ctx.quadraticCurveTo(125,100,125,62.5);
        ctx.quadraticCurveTo(125,25,75,25);
        ctx.stroke();
</script>            

动用路径绘制图形需求一些额外的手续。首先,需求转移路线。然后再路线上应用绘图命令绘制。之后闭合路线。一旦路线生成,你就能够透过描边或填充路径来渲染图形。以下是所要用到的函数:

arc(x,y,r,sa,ea,true/false):x、y为圆心坐标,r为半径,sa、ea分 别为开头角度和得了角度,最终一个参数为true时,顺时针画圆,false 则逆时针画圆

绘制路线

  分裂于SVG,HTML中的成分canvas只支持一种原生的图样绘制:矩形。全数别的的图片的绘图都至少必要生成一条路子。但是,大家富有不菲门道生成的点子让复杂图形的绘图成为了或然。

x与y钦命了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标。width和height设置矩形的尺码。

主干图形绘制仿佛此了,我不会很详细地上课下面的代码,因为其实那很轻易驾驭。

以那件事例使用五个贝塞尔曲线来渲染对话框。

图片 5

例如,绘制三角形的代码如下:

bezierCurveTo (kx1,ky1,kx2,ky2,ex,ey) :三回贝塞尔曲线,三个调节点,贰个巅峰。

图片 6

fillRect()函数绘制了二个边长为200px的红棕正方形。clearRect()函数从长方形的基本开首擦除了三个100*100px的长方形,接着strokeRect()在裁撤区域内生成二个80*80的正方形边框。效果图:

fillRect(x, y, width, height)  绘制多个填写的矩形;  

圆形的绘图

怎么样是调控点,如图:

图片 7

TAG标签: HTML5
版权声明:本文由彩民之家高手论坛发布于前端知识,转载请注明出处:浅谈HTML5中canvas中的beginPath()和closePath()的关键