HTML5 Canvas :图形

关于图形的理解

一条或者多条路径相交产生闭环时就会形成一个图形。所以,图形的基础元素是路径,而在 canvas 中画出图形就是将路径闭合,然后通过描边或填充路径区域来渲染图形。

闭合路径

闭合方法:

// 创建从当前点到开始点的路径
context.closePath();

闭合路径就是创建当前路径中的结束点与开始点的路径。使用路径中的一个例子来做闭合测试...

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(50,20);
ctx.arcTo(150,20,150,70,50);
ctx.lineTo(150,150);

// 手动闭合 or
ctx.lineTo(20,20); 
// 自动闭合
ctx.closePath();

ctx.stroke();

由此可见,我们可以通过闭合路径绘制一些基本图形!


绘制长方形

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(180,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.closePath();
ctx.stroke();


绘制三角形

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(30,100);
ctx.lineTo(170,100);
ctx.closePath();
ctx.stroke();


绘制圆形

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.stroke();


填充路径

填充方法:

// 填充当前绘图(路径)。默认颜色是黑色。
context.fill();

如果路径未关闭,那么 fill() 方法会从路径结束点到开始点之间添加一条线,以关闭该路径,然后填充该路径。

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(30,100);
ctx.lineTo(170,100);
ctx.fill();

You May Also Like

View More
HTML5 Canvas :性能优化
View More
HTML5 Canvas :碰撞检测
View More
HTML5 Canvas :正N角星

All Comments

LEAVE A REPLY

Tips: Your email address will not be disclosed!

If you can't see clearly,please click to change...