web前端：浅谈使用canvas绘制多边形
宣传部部长
2024-04-23 23:28
CanvasAPI(画布)是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用Javascript操作的位图(bitmap)。
Canvas对象表示一个HTML画布元素-<canvas>。它没有自己的行为，但是定义了一个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<side.length;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);
这张图片是代码执行后的结果，如下面图像所示：
<canvas>标记由Apple在Safari1.3web浏览器中引入。对HTML的这一根本扩展的原因在于，HTML在Safari中的绘图能力也为MacOSX桌面的Dashboard组件所使用，并且Apple希望有一种方式在Dashboard中支持脚本化的图形。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
