当前位置：网站首页 > 培训教程 > Html5 > 正文

HTML5 Canvas - 路径_惠州计算机HTML5培训学校

作者：黄君发布时间：2021-01-21分类：Html5浏览：1091

导读：在Canvas上画线，我们将使用以下两种方法：

在Canvas上画线，我们将使用以下两种方法：

绘制线条我们必须使用到 "ink" 的方法，就像stroke().

实例

定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:

下载2.png

JavaScript:

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

在canvas中绘制圆形, 我们将使用以下方法:

arc(x,y,r,start,stop)

实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill().

使用 arc() 方法绘制一个圆:

下载.png

JavaScript:

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

点击咨询直接了解更多相关资料，我在惠州北大青鸟新方舟等你.