web前端：浅谈使用canvas绘制多边形

作者:kirkor 更新于： 2020-03-05 11:36:45

　　CanvasAPI(画布)是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用Javascript操作的位图(bitmap)。

　　Canvas对象表示一个HTML画布元素-。它没有自己的行为，但是定义了一个API支持脚本化客户端绘图操作。

　　本文主要使用坐标轴的使用来绘制多边形，点位则都是在y轴上寻找，这种方法能够更好的理解图形与修改。

　　具体的编程代码如下所示：

　　//id为html里canvas标签的属性id；

　　//x，y为坐标轴的起始位置，因为canvas默认坐标轴在左上角

　　//color为填充图形颜色

　　//...side为边，如果有5个参数则绘制出来的为五边形，6个就是六边形

　　vardraw=function(id,x,y,color,...side){

　　varc=document.getElementById(id);

　　varctx=c.getContext("2d");

　　//移动起始坐标轴

　　ctx.translate(x,y);

　　ctx.fillStyle=color;

　　//坐标轴旋转的角度

　　varangle=360/(side.length);

　　ctx.beginPath();

　　//第一个点位

　　ctx.moveTo(0,-side[0])

　　for(leti=1;i

　　//旋转坐标轴

　　ctx.rotate(angle*Math.PI/180);

　　ctx.lineTo(0,-side[i]);

　　}

　　//填充

　　ctx.fill();

　　ctx.closePath();

　　}

　　draw('mycanvas',50,50,'#F0F0F0',50,50,50,50,50,50);

　　draw('mycanvas',0,0,'#E0E0E0',25,25,25,25,25,25);

　　draw('mycanvas',0,0,'#FF9797',25,25,20,20,40,25);

　　这张图片是代码执行后的结果，如下面图像所示：

　　标记由Apple在Safari1.3web浏览器中引入。对HTML的这一根本扩展的原因在于，HTML在Safari中的绘图能力也为MacOSX桌面的Dashboard组件所使用，并且Apple希望有一种方式在Dashboard中支持脚本化的图形。