html5 Canvas画图实例教程(8)—canvas里画曲线图之b

日期:2021-02-26 类型:科技新闻 

关键词:小程序开发者工具,小程序在线生成平台,小程序编辑,免费的小程序,微信小程序在哪里

前面的文章内容我早已讲了3种在canvas中画曲线图的方式:arc,arcTo和quadraticCurveTo.她们都有1个相互点,便是她们画的曲线图都只能偏重1边,今日讲的bezierCurveTo与她们最大的不一样点便是有两个操纵点,便可以画出S形的曲线图了。

bezierCurveTo,也便是所谓的贝赛尔曲线图了,假如你学过一些画图专用工具,就可以立刻了解。
bezierCurveTo的英语的语法以下
ctx.bezierCurveTo(x1,y1,x2,y2,x,y);他的主要参数我照样子写一写解释1下,在其中的(x1,y1)即操纵点1的座标,(x2,y2)是操纵点2的座标,(x,y)是他的终点站座标。和quadraticCurveTo1样,他的起始点座标也是由moveTo预先设定好的。

因此,bezierCurveTo画出1条曲线图必须4个点:起始点,终点站,操纵点1,操纵点2.以便后续解读,这里我假设操纵点1对应起始点,操纵点2对应终点站
这里又要提到canvas画图的老难题了,便是编码画图所有靠猜,画到哪里你要更新下才可以明了。

我還是延续前面的优质传统式,画1些輔助线来协助大伙儿了解:

拷贝编码
编码以下:

var x1=450, //操纵点1的x座标
y1 = 300, //操纵点1的y
x2 = 450, //操纵点2的x
y2 = 500,//操纵点2的y
x = 300, //终点站x
y = 500;//终点站y
ctx.moveTo(300,300);//起始点
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "rgba(0,0,0,1)"
ctx.moveTo(300,300);
ctx.bezierCurveTo(x1,y1,x2,y2,x,y);
ctx.stroke();
//刚开始画輔助线
ctx.beginPath();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.lineWidth = 1;
// 联接起始点和操纵点1
ctx.moveTo(300,300);
ctx.lineTo(x1,y1);
// 联接终点站和操纵点2
ctx.moveTo(x2,y2);
ctx.lineTo(x,y);
// 联接起始点与终点站(基准线)
ctx.moveTo(300,300);
ctx.lineTo(x,y);
ctx.stroke();


这里先画了1个相近quadraticCurveTo的曲线图,只偏重1边。这条线显得较为“圆滑”,是由于操纵点1与2的x座标是同样的。
如今再画1个S形的曲线图,证实bezierCurveTo是不同寻常的:

拷贝编码
编码以下:

var x1 = 150;
...


实际上要是把操纵点1的座标变1下就可以了。假如操纵点1与操纵点2的座标各自处在基准线的两侧,则是画出S形的曲线图;假如都在基准线的某1边,则是相近于quadraticCurveTo的实际效果。
这个事例的情况较为简易,基准线条(起始点至终点站)是垂直的,但具体运用广州中山大学一部分情况下大家的基准线全是斜着的,那状况就繁杂多了。但是大伙儿自身试吧

每一个画图的方式看起来作用都较为单1,可是,强劲的方式是各个单1的方式组成出来的。后续的文章内容我试着解读1些基本图型的画法,如圆角矩形框,椭圆,她们就必须之前这些单1的方式融合起来。