canvas绘制多边形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>canvas绘制多边形</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid darkcyan;" width="400" height="400"></canvas><script>var c = document.getElementById("canvas").getContext("2d");//定义一个以（x,y）为中心，半径为r的规则n边型；//每个顶点都是均匀分布在圆周上//将第一个顶点放置在最上面，或者指定一定角度//除非最后一个参数是true，否则顺时针旋转function polygon(c,n,x,y,r,angle,counterClockwise) {angle = angle || 0;counterClockwise = counterClockwise || false;c.moveTo(x+r*Math.sin(angle),y-r*Math.cos(angle));var delta = 2*Math.PI/n;for(var i=1;i<n;i++){angle+=counterClockwise?-delta:delta;c.lineTo(x+r*Math.sin(angle),y-r*Math.cos(angle));}c.closePath();}c.beginPath();polygon(c,3,50,70,50);polygon(c,4,150,60,50,Math.PI/4);polygon(c,5,255,55,50);c.fillStyle = "#ccc";c.strokeStyle = "#008";c.lineWidth = 5;c.fill();c.stroke();
</script>
</body>
</html>

转载于:https://www.cnblogs.com/QianBoy/p/7856746.html

canvas绘制多边形相关推荐

vue canvas绘制多边形
一.html部分 <div><el-row><el-col :span="3"><div class="toolbar" ...
（三）canvas绘制样式
beginPath() 对画线点的一个开始限制 moveTo() 画线的起点,只在开头使用参数两个x轴,y轴 lineTo() 后续连线两个参数x轴,y轴 stroke() 连线无填充 fill( ...
html5 Canvas 绘制基本图形从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形从绘制直线到路径 Jack Lee 的 CSDN 博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
android 自定义多边形,Android:自定义view之Canvas绘制图形
前面讲解了onMeasure,接下来讲解onDraw,onDraw主要就是绘制,也就是我们真正关心的部分,使用的是Canvas绘图. @Override protected void onDraw(C ...
绘制半圆_Android Canvas 绘制小黄人
❝ 学习往往是枯燥的,如果能用一个有趣 Demo 来学习和练习技术,那对知识的掌握就会更牢固.我在学习 Canvas 绘制 API 的时候就是这样做的. ❞ 截图镇楼效果图我觉得这个绘制小黄人的自 ...
Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...
rosweb，roslib，ROS2D.PolygonMarker 绘制多边形
ROS2D.PolygonMarker 绘制多边形 //------------- 2D - -------------------------------var viewer = new ROS2D ...
JS实现鼠标点击爱心绘制多边形每日一言功能
本篇文章主要介绍我的个人博客程序猿刘川枫中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效经常在 ...
Canvas 绘制直线
Canvas 绘制直线 1.canvas绘图是一种基于状态的绘图,绘图的过程应该是先设置绘图的状态,再调用具体的函数进行绘制. 例如绘制一条(100,100)到(700,700)的直线: contex ...

canvas绘制多边形

canvas绘制多边形相关推荐

最新文章

热门文章